elementUI表格合并行

最新推荐文章于 2024-08-13 23:10:15 发布

美酒没故事°

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量2.3k

点赞数 3

文章标签： javascript vue elementui 表格合并表格列

本文链接：https://blog.csdn.net/qq_42618566/article/details/119245372

版权

在这里插入图片描述

<el-table
          border
          ref="table"
          height="520"
          :cell-class-name="mergeTableRowCss"
          :span-method="mergeTableRow"
          :data="directoryPriceTableData"
        >
          <el-table-column header-align="center" label="用电分类">
            <el-table-column
              prop="name"
              min-width="110"
              label="一级用电分类"
            ></el-table-column>
            <el-table-column
              prop="name2"
              min-width="110"
              label="二级用电分类"
            ></el-table-column>
          </el-table-column>

          <el-table-column
            header-align="center"
            label="电度电价（含政府性基金及附加）"
          >
            <el-table-column
              prop="prc01"
              width="100"
              label=" 220 - 380伏"
            ></el-table-column>
            <el-table-column
              prop="prc02"
              width="90"
              label="1 - 10千伏"
            ></el-table-column>
            <el-table-column
              prop="prc03"
              label="10 - 20千伏"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="prc04"
              label="35 - 110千伏"
              width="110"
            ></el-table-column>
            <el-table-column
              prop="prc05"
              label="110 - 220千伏"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="prc06"
              label="220 - 500千伏"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="prc07"
              label=" 500 - 750千伏"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="prc08"
              label="750千伏及以上"
              width="120"
            ></el-table-column>
          </el-table-column>
          <el-table-column header-align="center" label="基本电价">
            <el-table-column
              prop="capPrc"
              width="170"
              label="最大需量（元/千瓦/月）"
            ></el-table-column>
            <el-table-column
              prop="dmdPrc"
              width="200"
              label="变压器容量（元/千伏安/月）"
            ></el-table-column>
          </el-table-column>
        </el-table>

getData(){
	// 获取数据后调用封装的方法
	this.directoryPriceTableData = this.mergeTableRowMethod(res.result, ["name"]);// 意思是name的列有重复的值就要合并
},
// 被合并行的样式
mergeTableRowCss({ row, column, rowIndex, columnIndex }) {
   console.log(row, column, rowIndex, columnIndex);
   if (columnIndex === 0 || columnIndex === 1) {
     return "table-header-css";
   }
 },
 // elementUI的合并行方法
 mergeTableRow({ row, column, rowIndex, columnIndex }) {
   // console.log(row, column, rowIndex, columnIndex);
   const span = column["property"] + "-span";
   if (row[span]) {
     return row[span];
   }
 },
 // 封装合并行逻辑
 mergeTableRowMethod(data, merge) {
   if (!merge || merge.length === 0) {
     return data;
   }
   merge.forEach((m) => {
     const mList = {};
     data = data.map((v, index) => {
       const rowVal = v[m];
       if (mList[rowVal] && mList[rowVal].newIndex === index) {
         mList[rowVal]["num"]++;
         mList[rowVal]["newIndex"]++;
         data[mList[rowVal]["index"]][m + "-span"].rowspan++;
         v[m + "-span"] = {
           rowspan: 0,
           colspan: 0,
         };
       } else {
         mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
         v[m + "-span"] = {
           rowspan: 1,
           colspan: 1,
         };
       }
       return v;
     });
   });
   return data;
 },

/deep/.el-table__body tr:hover > td.table-header-css {
  background-color: #fff0e3 !important;
}

/deep/.table-header-css {
  background-color: #fff0e3;
}