VUE+ElementUI Table三级表格实现“指定展开行““指定合并行”

继table表格实现嵌套并每次只展开一行，其他行收起，并内层表格实现部分合并行后，因需求更替，功能迭代，现需要实现三级嵌套表格，一级二级表格都需要序号，loading改为只有整个表格加载（不再分一级二级表格分开加载），并且后端接口为树形结构，其他指定行展开，合并指定行等功能不变。详细代码解析在前章已解释，请查看《VUE+ElementUI Table表格实现“指定行“展开并且其他行收起，“指定行”数据重复实现“合并行”》这一期。

页面效果

 核心代码

​​<el-table 
      v-loading="loading" 
      :data="testSampleList"
      @selection-change="handleSelectionChange"  
      @expand-change="expandChange" 
      :header-cell-style="{'background-color': '#f8f8f9'}"
      row-key="serialNumber"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column  type="selection"  align="center" />
      <el-table-column label="序号" align="center" type="index" >
        <template slot-scope="scope">
            <span>{{(queryParams.pageNum-1)*queryParams.pageSize+scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="15px">
        <template slot-scope="props">
          <el-table 
            :data="props.row.samples" 
            @expand-change="expandMiddleChange" 
            :header-cell-style="{'background-color': '#f8f8f9','padding':'0'}"
            :row-style="{height:0+'px'}"
            :cell-style="{padding:0+'px'}"
            style="margin: 0;padding: 0;"
            row-key="id"
            :expand-row-keys="middleRowKeys"
          >
            <el-table-column type="expand" width="15px">
              <template slot-scope="scope">
                <el-table 
                  :data="scope.row.dataList" 
                  :header-cell-style="{'background-color': '#f8f8f9','padding':'0'}"
                  :row-style="{height:0+'px'}"
                  :cell-style="{padding:0+'px'}"
                  style="margin: 0;padding: 0;"
                  :key="scope.$index"
                  :span-method=" (params) => objectSpanMethod(params, scope.$index)"
                >
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="序号" align="center" type="index" >
              <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
         </el-table>
        </template>
      </el-table-column>
</el-table>
                 

<script>
    data() {
		return {
        	//一级下拉表格展开行id的数组
      		expandRowKeys:[],
            //二级下拉表格展开行id的数组
            middleRowKeys:[],
            //一级表格数据
            testSampleList: [],
            //二级下拉表格
            middleSampleList:[],
            //三级数据表格数据
            dropSampleList:[],
		}
	},
	methods: {
		  /** 查询样品一级分类列表 */
          getList() {
            let queryParams = this.addDateRange(this.queryParams, this.entrustDateRange, "EntrustDate");
            listTestSample(queryParams).then(response => {
            this.testSampleList = response.rows;
            this.expandRowKeys = [];
            this.middleRowKeys = [];
            this.middleSampleList = [];
            this.loading = false;
          })
        },
//一级下拉展开事件----动态获取内嵌表数据
    expandChange:function(row, expandedRows) {
      let that = this;
	  //只展开一行
	  if (expandedRows.length) {
        that.expandRowKeys = []
        if (row) {
          that.expandRowKeys.push(row.serialNumber);
        }
      } else {
        that.expandRowKeys = []
      }
    },
    //二级下拉
    expandMiddleChange:function(row, expandedRows) {
      this.middleSampleList = row.dataList; 
      let that = this;
			//只展开一行
			if (expandedRows.length) {//说明展开了
        that.middleRowKeys = []
        if (row) {
          that.middleRowKeys.push(row.id)//只展开当前行id，唯一标识
          this.middleSampleList.forEach((index,value) => {
            this.middleSampleList[value].spanArr = [];
            this.middleSampleList[value].dropSampleList = row.dataList;
            this.getSpanArr(this.middleSampleList, value)
          })   
        }
      } else {
        that.middleRowKeys = []
      }
    },
    //三级列表合并
    objectSpanMethod({ row, column, rowIndex, columnIndex },value) {
      if (columnIndex === 3) {
        const _row = row.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    getSpanArr(middleSampleList, value) {
    let data = this.middleSampleList;
      this.spanArr = []
      this.pos = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          if (data[i].testitemsNumber === data[i - 1].testitemsNumber) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      this.$set(this.middleSampleList[value], "spanArr", this.spanArr); 
    },
  },
}
</script>