vue封装原生table表格方法

最新推荐文章于 2025-04-30 16:49:41 发布

Ctrl Alt Shift

最新推荐文章于 2025-04-30 16:49:41 发布

阅读量1.9k

点赞数 20

分类专栏： Web 前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42676530/article/details/139988337

版权

适用场景：有若干个表格，前面几列格式不一致，但是后面几列格式皆为占一个单元格，所以需要封装表格，表格元素自动根据数据结构生成即可；并且用户可新增列数据。

分类：
固定数据部分 就是根据数据结构传参设置table单元格内容及格式，数据结构由前端定义；
可新增删除部分 是由用户操作，格式统一为占一格，返回数据结构以列为单位，其中，删除列以判断对应列是否有表头为依据。
在这里插入图片描述

展示效果如下：

封装原生表格演示

固定表格部分

需要确定的是固定表格中的需要给单元格元素传哪些值：

单元格的内容；
单元格格式会有很多种情况，可能会占几行，也可能会占几列，所以就需要控制着每个单元格的colspan和rowspan；
单元格的内容长短不一致所以也需要控制着单元格的宽度；

其它参数可有可无，需要依照自身需求添加逻辑。

数据格式

数据格式有四大字段，分别控制着出表头以外的行数(tdRows)，为了便于控制除表头的tr循环次数；表格名称(title)；表头内容(ths)和表身内容(tds)。

SafetyTableData:
      {
   
        tdRows: 3,//除表头的tbody所占行数
        title: '表格名称表格名称表格名称表格名称表格名称',
        ths: [
          {
   
            thName: 'Safety/安全',
            colspan: 1,
            rowspan: 4,
            isEdit: false,
            width: 100,
          },
          {
   
            thName: '关键指标KPI',
            colspan: 2,
            rowspan: 1,
            isEdit: false,
            width: 100,
          },
          {
   
            thName: '输出部门',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: 100,
          },
          {
   
            thName: '公式',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: 180,
          },
          {
   
            thName: '单位',
            colspan: 1,
            rowspan: 1,
            isEdit: false,
            width: 100,
          },
        ],
        tds: [
          [
            {
    tdName: '伤害', colspan: 1, rowspan: 3, isEdit: false, width: 30, },
            {
    tdName: '占比%', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: '游戏', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: '(损失工时/ 投入工时)*100%', colspan: 1, rowspan: 1, isEdit: false, width: 180, },
            {
    tdName: '%', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
          ],
          [
            {
    tdName: '一些值', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: '游戏', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: 'ABCDEFG', colspan: 1, rowspan: 1, isEdit: false, width: 180, },
            {
    tdName: 'absolute', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
          ],
          [
            {
    tdName: '实际占比%', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: '游戏', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
            {
    tdName: '(实际损失工时/实际投入工时)*100%', colspan: 1, rowspan: 1, isEdit: false, width: 180, },
            {
    tdName: '%', colspan: 1, rowspan: 1, isEdit: false, width: 100, },
          ],
          // Repeat similar structure for other rows as needed
        ],
      },

元素设置

detailTableData为表格固定格式需要显示的数据，前面已设置了SafetyTableData的数据格式，可以直接将SafetyTableData赋值给detailTableData。若还有其他固定表格格式同理视情况赋值即可。

<table border="1">
        <tr ref="tableHeader">
          <th v-for="(thItem, index) in detailTableData.ths" :key="'th-' + index" :rowspan="thItem.rowspan" :colspan="thItem.colspan" :style="'width:'+thItem.width+'px'">
            {
  {thItem.thName}}
          </th>
        </tr>
        <tr v-for="rowIndex in detailTableData.tdRows" :key="rowIndex">
          <td v-for="(tdItem, colIndex) in detailTableDat