elementui表格动态列太多 element列表动态列合并

转载

mob64ca13fb1f2e 2024-02-19 12:54:17

文章标签 elementui表格动态列太多 javascript ui 前端 ViewUI 文章分类 机器学习人工智能

　　　　文章需求：动态实现table表格中行/列的自动合并

　　　　使用框架及UI类库：Vue+Element-ui

　　　　代码地址：https://github.com/dreamITGirl/VueProgect

　　　　最终实现的表格数据

elementui表格动态列太多 element列表动态列合并_前端

　　实现思路：

　　　　在table组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列

　　实现代码：　

//处理table数据的方法，将连续相同的数据汇总 
　　merge() {
      let OrderObj = {};
      let provinceObj = {};
      this.tableData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.operators]) {
　　　　　　//如果下一个数据中的operators和这一列的数据相同，则合并，反之，不合并；（增加这一个判断的目的是为了防止隔行出现相同时，列合并）
          let nextItem = this.tableData[index + 1].operators
            ? this.tableData[index + 1].operators
            : undefined;
          let prevItem = this.tableData[index - 1].operators
            ? this.tableData[index - 1].operators
            : undefined;
          if (element.operators == nextItem) {
            OrderObj[element.operators].push(index);
          } else if (element.operators == prevItem) {
            OrderObj[element.operators].push(index);
          }
        } else {
          OrderObj[element.operators] = [];
          OrderObj[element.operators].push(index);
        }
        if (provinceObj[element.province]) {
          let nextPro = this.tableData[index + 1]
            ? this.tableData[index + 1].province
            : undefined;
          let prevPro = this.tableData[index - 1].province
            ? this.tableData[index - 1].province
            : undefined;
          if (element.province == nextPro) {
            provinceObj[element.province].push(index);
          } else if (element.province == prevPro) {
            provinceObj[element.province].push(index);
          }
        } else {
          provinceObj[element.province] = [];
          provinceObj[element.province].push(index);
        }
      });
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      for (let i in provinceObj) {
        if (provinceObj[i].length > 1) {
          this.provinceArr.push(provinceObj[i]);
        }
      }
}

//合并的方法
objectSpanMethod({ row, rowIndex, column, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
　　　　//因为需求是前两列中有相同的就合并，所以需要再次判断出来第一列中哪些行需要合并；
      if (columnIndex === 1) {
        for (let j = 0; j < this.provinceArr.length; j++) {
          let element = this.provinceArr[j];
          for (let k = 0; k < element.length; k++) {
            let item = element[k];
            if (rowIndex === item) {
              if (k === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (k !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
    }

=============================================

上面的代码会导致一个问题，就是当上述数据中，当运营商是移动时，且也有省份和其他运营商的省份出现相同且连续时，即table的数据如下时，也就是移动中有和其他的省份出现相同且连续的时候，代码算法就会出现问题。这时算出的出现广州的数组位置index数组就是[0，1，2，8，9]，这样的话，table的合并行就会出现错误。后面是修改后的代码

tableData: [
{
operators: "其他",
province: "广东",
room: "广州双线1",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "其他",
province: "广东",
room: "广州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "其他",
province: "广东",
room: "广州双线3",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "电信",
province: "浙江",
room: "广州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
},
{
operators: "电信",
province: "浙江",
room: "杭州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
},
{
operators: "电信",
province: "浙江",
room: "杭州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
},
{
operators: "联通",
province: "江西",
room: "杭州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "联通",
province: "浙江",
room: "浙江双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data)  第三条10G (no latest data,no latest data)  第四条10G"
},
{
operators: "移动",
province: "江西",
room: "江西双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线２",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
]

merge() {
      let OrderObj = {};
      let provinceObj = {};
      this.tableData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.operators]) {
          let nextItem = this.tableData[index + 1] //为防止报错，先判断this.tableData[index+1]项是否存在，否则js会报错
            ? this.tableData[index + 1].operators
            : undefined;
          let prevItem = this.tableData[index - 1].operators
            ? this.tableData[index - 1].operators
            : undefined;
          if (element.operators == nextItem) {
            OrderObj[element.operators].push(index);
          } else if (element.operators == prevItem) {
            OrderObj[element.operators].push(index);
          }
        } else {
          OrderObj[element.operators] = [];
          OrderObj[element.operators].push(index);
        }
        
        if (provinceObj[element.province]) {
          let nextPro = this.tableData[index + 1]
            ? this.tableData[index + 1].province
            : undefined;
          let prevPro = this.tableData[index - 1].province
            ? this.tableData[index - 1].province
            : undefined;
          if (element.province == nextPro) {
            provinceObj[element.province].push(index);
          } else if (element.province == prevPro) {
            provinceObj[element.province].push(index);
          }
        } else {
         
          provinceObj[element.province] = [];
          provinceObj[element.province].push(index);
        }
      });
      
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
     //修改的地方
      for (let i in provinceObj) {
        if (provinceObj[i].length > 1) {
          this.handleData(provinceObj[i])
        }
      }
    },
//新增的方法，处理当数组的长度大于2的时候
    handleData(data){
      let temp = data;
      let itemArr = [];
      let itemArrNew = [];
      let resArr = [];
      if (data.length>2) {
          for (let i = 0; i < data.length; i++) {
              if (data[i+1]) {
                if (data[i+1] - data[i] > 1) {
                  itemArr = data.slice(0,i+1)
                  itemArrNew = temp.slice(i+1,temp.length)
                  break;
                }else{

　　　　　　　　　　　　resArr = data

}
              }
          }
          if (itemArr.length>0 || itemArrNew.length>0) {
            this.provinceArr.push(itemArr)
            this.provinceArr.push(itemArrNew)
          }else{

　　　　　　　　this.provinceArr.push(data)

}
      }else{
        this.provinceArr.push(data)
      }
    },

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：springboot securit 设置登录过期时间 springboot登录功能实现

下一篇：springmvc入门级程序 springmvc简单介绍

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

elementui表格动态列太多 element列表动态列合并

elementui表格动态列太多 element列表动态列合并

51CTO博客