element table合并行值相同的合并

最新推荐文章于 2024-09-26 16:58:44 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-09-26 16:58:44 发布

阅读量2.5k

点赞数 2

分类专栏： element 文章标签：前端 css css3

原文链接：https://www.cnblogs.com/weiweiyeyu/p/15351658.html

版权

element 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本文介绍了一段关于表格布局的Vue组件，展示了如何使用`el-table`进行功能、描述、主题和操作权限的列布局，并通过`objectSpanMethod`实现数据行的智能合并。同时提及了API中topic的管理，涉及发布、订阅和响应操作。

摘要由CSDN通过智能技术生成

在这里插入图片描述

结构：


<el-table
        :data="topicTableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 10px">
        <el-table-column prop="func" label="功能"/>
        <el-table-column prop="desc" label="描述" minWidth="200"/>
        <el-table-column prop="topic" label="ttt" minWidth="400"/>
        <el-table-column prop="permision" label="操作" width="90" align="center"/>
    </el-table>

数据：

topicTableData: [
    { func: 'aaa',desc: '同步时间',topic: 'get/624667d95d3c9',permision: '发布'}, 
      { func: 'aaa',desc: '同步时间',topic: 'cmd/624667d95d3c9dcfea4443e6',permision: '订阅'}, 
      { func: 'aaa',desc: '同步时间',topic: 'cmd_rese/624667d95d3c9dcfea4443e',permision: '响应'}, 
      { func: '物模',desc: '从平台获取物模型配置',topic: '(cmd|rpc)/624667d95d3c9dcfea444',permision: '订阅'}, 
      { func: '物模',desc: '从平台获取物模型配置',topic: '(cmd_rese|rpc_resp)/624667d95d3c9dcfea44',permision: '响应'}, 
      { func: '设置123',desc: '将单个设备的属性列表以分组方式设置属性值',topic: '(cmd|rpc)/624667d95d3c9dcfea4443e6',permision: '订阅'},
      { func: '设置123',desc: '将单个设备的属性列表以分组方式设置属性值',topic: '(cmd_rese|rpc_resp)/624667d95d3c9dcfea4443e6',permision: '响应'},
  ],
  spanArr: [],
  pos: null

方法：

// 合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     let that = this
     that.spanArr = [] 
     that.pos = 0
     let data = this.topicTableData
 　　//遍历数据
     data.forEach((item, index) => {
         if (index === 0) { //判断是否是第一项（取决于你准备合并表格第几项）
             this.spanArr.push(1)
             this.spanSecondArr.push(1)
             this.pos = 0
         } else {//不是第一项时，就根据标识去存储
             if (data[index].func === data[index - 1].func) {// 查找到符合条件的数据时每次要把之前存储的数据+1
                 this.spanArr[this.pos] += 1
                 this.spanArr.push(0)
             } else {// 没有符合的数据时，要记住当前的index
                 this.spanArr.push(1)
                 this.spanSecondArr.push(1)
                 this.pos = index
             }
         }
     })
     if (columnIndex === 0) {
     　　// 页面列表上 表格合并行 -> 第几列(从0开始)
     　　// 需要合并多个单元格时 依次增加判断条件即可
     　　// 数组存储的数据 取出
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
         return {
             rowspan: _row,
             colspan: _col
         }
     } else {//不可以return {rowspan：0， colspan: 0} 会造成数据不渲染， 也可以不写else，eslint过不了的话就返回false
         return false
     }
     
 },