vue 自定义的通用的表格组件（使用div）

做项目的时候由于传统的table及elementUI的el-table的tr和td没办法设置间距，满足不了UI提供的设计稿，为了还原，自己封装了该组件

该表格组件的特点

  1. 表头排序功能：支持点击表头进行升序、降序排序，并显示相应的排序图标。
  2. 复选框功能：可以在表格中为每一行数据添加复选框，并支持全选和取消全选操作。
  3. 图表展示：支持在表格中展示图表数据，提供相应的图表显示和交互功能。
  4. 文件上传功能：对于特定的列，支持文件上传和编辑操作，并可以显示上传进度和状态。
  5. 按钮操作：支持在表格中添加按钮并绑定相应的点击事件，实现自定义的操作功能（可以动态控制按钮的显示和禁用状态）。
  6. 支持单元格内容的格式化显示
  7. 行点击事件：支持点击表格某一行触发相应的事件处理。
  8. 包含了滚动条联动的功能，右侧侧固定列和表格内容的联动滚动

该表格组件的介绍

封装组件具体用了vue哪些指令

  1. 条件渲染

    • 使用了 v-if 指令来根据条件判断是否渲染整个表格容器。
      样式类绑定：

  2. 样式类绑定

    • 使用了 :class 绑定动态的样式类。。

  3. 表头渲染：

    • 使用了 v-for 指令循环渲染表头的每一列。
    • 对每一列进行了样式设定，并且设置了点击事件处理函数。

  4. 表格内容渲染：

    • 使用了 v-for 指令循环渲染表格的每一行和每一列。
    • 对每个单元格进行了样式设定，并且设置了点击事件处理函数。

  5. 固定列：

    • 在表格右侧实现了固定列的功能，并根据条件判断是否渲染固定列的内容。

  6. 事件处理：

    • 使用了 @click 绑定点击事件处理函数。
    • 使用了 @change 监听复选框的变化事件。

  7. 插槽：

    • 使用了 slot 标签定义插槽，用于插入其他组件或内容。

表头部分

这部分代码负责渲染表格的表头结构，包括表头的各个列以及相关的操作按钮、排序功能等

<div class="common-table-header"> ......</div>

表格内容

这部分代码负责根据数据 data 动态渲染表格的行和列内容，包括每一行中的单元格内容、操作按钮、上传编辑功能等。

<div v-for="(row, index) in data"> ......</div>
类名介绍
  • common-table-body — 表格内容的盒子（除表头外）高度需固定（固定原因：表格滚动条）
  • common-table-body-wrapper — 表格内容的盒子（除表头外）高度自适应
  • common-table-row — 每一行的类名

固定列部分

<div class="common-table-box-fixed">......</div>

传参介绍

  • data — 表格显示的数据
  • columns — 表格列字段
    • 传参格式
      1. label对应value
      2. label2对应value1 — 这块后加的，value2被占用所以没对上可自行更改
      3. label3对应value3
[{label: '表头名称',value: "对应列内容的字段名",width: '表格列的宽度 --- 此处都是转化为vw以便自适应',paddingLeft: '每一列的左内边距默认都为20',paddingRight: '每一列的右内边距默认都为20',isSort: '是否是索引',position: "文字是位置-- center:居中；center-left:居左",valueFormatter: "单元格内容的格式化显示---方法 --- 解析value",valueFormatter1: "单元格内容的格式化显示---方法--- 解析value1",valueFormatter3: "单元格内容的格式化显示---方法 --- 解析value3 ",isHidden: '隐藏列',isDate: '日期格式 --- 日期有特殊样式显示',label2: '表头名称 --- 表格显示过多时一列支持显示1-3个字段，举例：表头名为姓名/性别/电话',value1: '对应列内容的字段名 --- 表格显示过多时一列支持显示1-3个字段，举例：姓名/性别/电话竖着展示',label3: '表头名称 --- 表格显示过多时一列支持显示1-3个字段，举例：表头名为姓名/性别/电话',value3: '对应列内容的字段名 --- 表格显示过多时一列支持显示1-3个字段，举例：姓名/性别/电话竖着展示',isTooltip: 是否超出显示提示框 --- value内容,isTooltip1: 是否超出显示提示框 --- value1内容,isTooltip2: 是否超出显示提示框 --- value3内容,value2: '表格值显示。一般显示名称后value2用来拼接到value后的',wordColor: '表格内容样色，默认为黑色，当该值为true则为灰色',isCommonProgress: '显示进度条',wrap: '通常用在操作列，按钮是否可以换行',isButton: '代表渲染按钮',buttonList: '按钮集合',fontColorIsBlue: '文字颜色变为蓝色',isbadge: '内容右上角显示的标记此处为数量',isProgressVal: '进度，这块显示两行，上边为具体值，下册为百分比进度',unit: '表格内容如果需要单位且不用valueFormatter，可直接使用该值进行传递',isEcharts: '需要绘制echarts',isImg: '代表需要展示图片',question: '表头显示提示框解释该字段表格含义',isClick: '表格可以点击需结合callback进行使用，只有点击每一列生效',callback: '方法，点击表格某行后执行',bgFormatter: '方法，根据某个值给表格行添加背景'}]
  • 举例
tableColumns = [{ label: "序号",value: "sort",width: this.windowWidth <= 1024 ? 70 * 2 : 78 * 2,paddingLeft: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,paddingRight: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,isSort: true,position: "center"},{ label: "创建日期",value: "createTime",isDate: true,width: this.windowWidth <= 1024 ? 140 * 2 : 148 * 2,position1: "center-left",valueFormatter: this.valueDateFormat,paddingLeft: 0,paddingRight: 0,isHidden: this.windowWidth <= 1024},{ label: "类型",value: "type",width: this.windowWidth <= 1024 ? 85 * 2 : 107 * 2,position: "center",valueFormatter: this.valueSourceFormat,paddingLeft: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,paddingRight: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2},];
  • isJump
    • 点击表格任意行及任意位置都能触发
  • isChoose
    • 支持选中某一行
  • needJudgeChooseStatus
    • false-任意选；true-需要满足某些条件才能被选
  • buttonList
    • 固定操作列按钮集合
  • fixedWidth
    • 固定操作列宽
  • fixedLabel
    • 固定操作表头的label
  • rowId
    • 选中某一行时判断是否重复选择的属性key
  • isScroll
    • 是否支持滚动表格后才加载某些内容
  • checkDisabledLabel
    • 表格多选框是否禁用要判断的属性key
  • titleCheck
    • 表格表头多选框的绑定值
  • titleChekcDisabled
    • 表格表头多选框是否禁用
  • chooseNumber
    • 选中表格行最多支持的数量
  • chooseTooltip
    • 选中表格行等于支持的数量后再选的提示

方法介绍

  • handleClickSort(handleSortDown,handleSortUp)
    • 表格的列头点击时触发排序操作，调用 $emit 方法来触发排序事件，并将排序方式和排序字段作为参数传递给父组件，供其进行相应的处理。
  • handleChangeCheck
    • 调用 $emit 方法触发勾选事件，将当前行的row作为参数传递给父组件
  • handleChangeCheckAll
    • 代表全选当前页 – 调用 $emit 方法触发勾选事件传递给父组件
  • progressoFormat
    • 用于格式化进度条的显示文本。该方法接收两个参数：percentage 表示进度百分比，status 表示进度状态
  • handleAvatarSuccess

    上传文件调用的方法

    • res-表示上传成功的响应对象
    • index-表示索引值
    • row 表示行信息。
  • beforeAvatarUpload

    上传文件判断文件类型和大小，根据条件决定是否压缩文件，并将结果返回给上传组件。同时，也会触发上传事件，并将索引值传递给父组件。

  • getFontColorIsBlue（getFontColorIsBlue1，getFontColorIsBlue2）
    • 判断是否给表格某列的添加类名，对文字颜色进行改变
  • getColumnValue（getColumnValue1，getColumnValue3）
    • 用来格式化内容
  • getColumnBg
    • 判断是否给该行添加背景类名
  • getColumnClass（getColumnClass1，getColumnClass2）
    • 判断是否给该行添加文字类名
  • getWidth
    • 设置每一列宽度
  • getPadding
    • 设置每一列内间距
  • getButtonDisabled
    • 判断按钮是否禁用
  • getButtonDisplay
    • 判断按钮是否隐藏显示
  • handleJudgeOperate
    • 判断该列是否隐藏显示
  • handleListenerScroll
    • 表格滚动事件
  • combinedScroll
    • 右侧侧固定列和表格内容的联动滚动
  • handleClickRow
    • 点击某一行
  • clearChooseData
    • 清除选中的内容

完整代码

commonTable.vue

 0">{{column.label}}{{column.label2}}<imgsrc="