表格-序号 折叠

效果图：

代码：

<el-table
      :data="tableData"
      style="width: 100%"
      v-loading="tableDataLoading"
      :header-cell-style="{ background: '#FAFAFA' }"
      :tree-props="{ children: 'recordList' }"
      row-key="id"

　　　　@row-click="expandChange"  // 更新

    >
      <el-table-column label="序号" width="90" prop="parentIndex">
        <template slot-scope="scope">
          <div v-if="scope.row.recordCount > 1" style="position:relative">
            <span class="serial_number"> {{ scope.row.parentIndex }}</span>
            <span class="serial_number_cell">{{
              "(" + scope.row.recordCount + ")"
            }}</span>
          </div>
          <div v-else>{{ scope.row.parentIndex }}</div>
        </template>
      </el-table-column>
</el-table>

methods:{
     // 在请求接口的函数里 
     函数名:{
        // tableData 表格接收的数组名
        let num = 1;
        this.tableData.forEach((item, index) => {
          item.id = num++;
　　　　　　item.expanded = false // 更新
          item.parentIndex = (this.pageNum - 1) * this.pageSize + index + 1;
          if (item.recordList && item.recordList.length > 0) {
            item.recordList.forEach(e => {
              e.id = num++;
            });
          }
        });
     },

　　expandChange(row, expanded) { // 更新---只展示一行其他同级的收起

      　　this.tableData.forEach(e => {

        　　if (row.id === e.id) {

          　　e.expanded = !e.expanded;

        　　} else {

          　　e.expanded = false;

        　　}

        　　this.$refs.topicTable.toggleRowExpansion(e, e.expanded);

      　　});

    　　},

}

<style lang="scss" scoped>
// 表格-序号
::v-deep.el-table .cell {
  display: flex;
}
// 折叠-箭头
::v-deep.el-table [class*="el-table__row--level"] .el-table__expand-icon {
  margin-left: 50px;
  color: #8c8c8c;
}
.serial_number {
  position: absolute;
  margin-left: -70px;
  margin-right: 10px;
}
.serial_number_cell {
  position: absolute;
  margin-left: -35px;
  color: #8c8c8c;
}
</style>