element表格列相同值自动合并单元格 多列

element表格列相同值自动合并单元格 多列

合并单元格需要在你数据渲染以后在去进行使用封装方法才可以生效!!!!
数据结构以及声明

 TableArr:[
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张三',x4:'42',x5:'51',x6:'61'},
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张四',x4:'42',x5:'52',x6:'62'},
          {x1:'xx车管所1',x2:'xxx查验岗',x3:'张五',x4:'43',x5:'53',x6:'63'},
          {x1:'xx车管所2',x2:'xxx受理岗',x3:'张三',x4:'44',x5:'54',x6:'65'},
          {x1:'xx车管所2',x2:'xxx受理岗',x3:'张四',x4:'45',x5:'55',x6:'65'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张三',x4:'46',x5:'56',x6:'66'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张四',x4:'47',x5:'57',x6:'67'},
          {x1:'xx车管所',x2:'xxx管理岗',x3:'张五',x4:'48',x5:'58',x6:'68'},
          {x1:'xx车管所',x2:'xxx车查验岗',x3:'张三',x4:'49',x5:'59',x6:'69'},
        ],
        spanObj:{},

封装方法

// 表格单元格合并多列
let [spanObj, pos] = [{}, {}];
//spanObj 存储每个key 对应的合并值
//pos  存储的是 key合并值得索引 大概吧
const dataMethod = (data, isH = []) => {
  //循环数据
  for (let i in data) {
    let dataI = data[i];
    //循环数据内对象,查看有多少key
    for (let j in dataI) {
      //如果只有一条数据时默认为1即可,无需合并
      if (~~i === 0) {
        spanObj[j] = [1];
        pos[j] = 0;
      } else {
        let [e, k] = [dataI, data[i - 1]];
        //判断上一级别是否存在 ,
        //存在当前的key是否和上级别的key是否一样
        //判断是否有数组规定只允许那几列需要合并单元格的
        if (k && e[j] === k[j] && (!isH?.length || isH.includes(j))) {
          //如果上一级和当前一级相当,数组就加1 数组后面就添加一个0
          spanObj[j][pos[j]] += 1;
          spanObj[j].push(0);
        } else {
          spanObj[j].push(1);
          pos[j] = i;
        }
        console.log(e, k);
      }
    }
  }
  return spanObj;
};

export { dataMethod };


使用只需要在引入后初始化使用即可。第一个值是数组,第二个值是 是否需要合并的key,全部都需要不填即可
spanObj 先声明在data

this.spanObj = dataMethod(this.TableArr,['x2','x1']);
//this.spanObj = dataMethod(this.TableArr);

在table 添加 span-method 合并方法

<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
>
	...
</el-table>

span-method 循环从左到右从上到下的顺序

objectSpanMethod({ row, column, rowIndex, columnIndex }){
        // console.log({ row, column, rowIndex, columnIndex },'合并表格')
        //判断合并列
        let _row = this.spanObj[column.property][rowIndex]
        let _col = _row>0?1:0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }

如果你需要根据某个字段来进行合并可以 objectSpanMethod
根据表格x6合并逻辑 来合并 x2 的数据

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log({ row, column, rowIndex, columnIndex },'合并表格')
      //判断合并列
      let property = column.property;
      if (property === 'x6') {
        property = 'x2';
      }
      let _row = this.spanObj[property][rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col,
      };
    },
  },

只允许第一栏和第六栏合并效果图 X6 和X1 代表你表格的key值

this.spanObj = dataMethod(this.TableArr,['x6','x1']);

允许全部合并效果图

this.spanObj = dataMethod(this.TableArr);

在这里插入图片描述

完整示例

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
     <el-table-column prop="date" label="日期" width="180">
     </el-table-column>
     <el-table-column prop="name" label="姓名" width="180">
     </el-table-column>
     <el-table-column prop="address" label="地址">
     </el-table-column>
   </el-table>
</template>
<script>
//引入封装的js
import {dataMethod} from '@/components/element/tableObjectSpanMethod.js';
 export default {
    data(){
      return{
        tableData: [],
        spanObj: {}
      }
    },
    created(){
       this.tableData = [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
      //动态渲染 请渲染数剧结束后在执行此方法
      this.spanObj = dataMethod(this.tableData);
    },
    methods:{
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
        // console.log({ row, column, rowIndex, columnIndex },'合并表格')
        //列合并
        let _row = this.spanObj[column.property]?this.spanObj[column.property][rowIndex]:1;
        let _col = _row>0?1:0;
        return {
          rowspan: _row,
          colspan: _col
        }
      },
    }
  }
 </script>
  • 14
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 34
    评论
要修改 Vue 表格某一,需要先找到要修改的那一,然后对其进行赋。 假设你的表格数据是一个数组,数组的每个元素都是一个对象,每个对象代表一行数据。那么,要修改某一,就需要先找到这个对象,然后对这个对象的属性进行赋。 具体的实现方法如下: 1. 找到要修改的那一表格,每一对应着表格数据的一个属性。因此,要找到要修改的那一,就需要知道这个属性的名称。 假设你要修改表格的第二,那么这一对应着表格数据的第二个属性。如果你的表格数据是一个数组,那么可以使用数组的 map 方法来将每个元素转换为一个只包含需要修改的那一的对象数组。例如: ```javascript let newData = data.map(item => { return { column2: item.column2 } }) ``` 这样,newData 数组的每个元素都只包含一个 column2 属性,代表着表格数据的第二。 2. 修改数据 有了要修改的那一,就可以对表格数据进行修改了。如果你要修改的是表格数据的某个属性,那么可以直接对这个属性进行赋。例如: ```javascript data[index].column2 = newValue ``` 其,index 是要修改的那一行的索引,newValue 是要修改成的新。 3. 更新表格 最后,需要将修改后的数据重新渲染到表格。如果你是使用的第三方表格组件,那么可以调用组件提供的更新方法,将修改后的数据传入即可。例如: ```javascript this.$refs.table.updateData(data) ``` 其,$refs.table 是你的表格组件的引用名称,data 是修改后的数据。如果你是手动实现的表格,那么可以使用 Vue 的响应式机制,将修改后的数据表格数据,Vue 会自动更新视图。例如: ```javascript this.tableData = data ``` 这样,表格就会自动更新,显示最新的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值