zoukankan      html  css  js  c++  java
  • Vue Element table 合并行

    如题,有时候表格需要合并同行

    <el-table :data="tableData" :span-method="objectSpanMethod" border>
    ...
    </el-table>
    
    
    export default {
        data() {
          pretreatmentNum:'',
          pretreatmentArr:[],  // 存放需要合并的单元格数据,数组中数字代表需要合并几个单元格
        }
    }
    methods: {
      ...
      deataPretreatment() {  // 在获取到表格数据渲染后调用该函数
          this.pretreatmentNum = 0;  // 存放当前需要合并单元格的索引
          this.pretreatmentArr = [];  // 存放需要合并的单元格数据,数组中数字表示需要合并几个单元格
          
          for (let i = 0; i < this.tableData.length; i++) {
            if (i == 0) {
              // 第一行、重新赋值
              this.pretreatmentArr.push(1);  // 这一行要显示以及行数
              this.pretreatmentNum = 0; // 显示的索引
            } else {
          // trigger_id 为需要合并数据的唯一标识key,根据自己的代码修改
    if (this.tableData[i].trigger_id == this.tableData[i-1].trigger_id) { // 当前和上一个行相同,累积单元格个数 this.pretreatmentArr[this.pretreatmentNum] += 1; // 累积合并的行数 this.pretreatmentArr.push(0); // 当前行隐藏 } else { // 当前数据和上一行不同 this.pretreatmentArr.push(1); // 需要显示以及行数 this.pretreatmentNum = i; // 显示的索引 } } } // console.log(this.pretreatmentArr) }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { const arr = [0, 1, 12, 13, 14, 15 ,16]; // 需要合并处理的列 for (let i = 0; i < arr.length; i++) { if (columnIndex == arr[i]) { const _row = this.pretreatmentArr[rowIndex]; // 取出当前存放行的合并状态,行索引对应的是否隐藏和显示及合并个数 const _col = _row > 0 ? 1 : 0; // 判断当前列是否要显示,行合并大于0,显示,列1;行合并等于0,隐藏,列0 return { // 合并:如 四行一列(rowspan:4,colspan: 1; 不合并:0行-0列) rowspan: _row, // 合并的行数 colspan: _col // 合并的列数 }; } } } }
  • 相关阅读:
    【漏洞分析】DDOS攻防分析(二)——HTTP篇
    【漏洞分析】DDOS攻防分析(四)——TCP篇
    [spring]spring框架的编码过滤器的使用
    [struts]s:action 的使用方法
    [maven]使用maven构建Appfuse失败
    [网站安全]windows本地安全策略阻止指定ip访问本机
    [前端]quirks模式(怪异模式)
    [前端]客户端缓存
    [struts]在线编辑器的使用选择
    [eclipse]Myeclipse console 中乱码问题
  • 原文地址:https://www.cnblogs.com/cp-cookie/p/14753844.html
Copyright © 2011-2022 走看看