elementUI table纵向合并

methods:{
// 获取表格数据
    async getTableData() {
      // 表格查询
      let data = {
        dealId: "selectDetial",
        pageInfo: this.pageInfo,
        selectForm: this.selectForm,
      };
      let res = await getTableInfo(data);
      if (res.status == true) {
        this.tableData = res.msg.resultList;
        this.pageInfo.total = res.msg.totalCount;
        //进行解析数据
        this.jiexi();
      }
    },
//合并装备名称相同的列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //rowIndex:行    columnIndex:列
      let { tableData } = this;
      if (columnIndex == 1) {//如果是列的下标是1,进行判断如果有重复出现的装备名称就只显示一个
        if (row.showEquipment) {
          return {
            rowspan: this.tempDetailslistMonth[tableData[rowIndex].C_EquipmentName],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    jiexi(){
      let tempDetailslistMonth = {};
    this.tableData.map((item) => {
      if (tempDetailslistMonth[item.C_EquipmentName]) {
        tempDetailslistMonth[item.C_EquipmentName]++;
        item.showEquipment = false;
        return item;
      } else {
        tempDetailslistMonth[item.C_EquipmentName] = 1;
        item.showEquipment = true;
        return item;
      }
    });
    this.tempDetailslistMonth = tempDetailslistMonth;
    }
},
created(){
this.getTableData();
}

页面

 
        
        

你可能感兴趣的:(elementUI table纵向合并)