ElementUI 中 Table expend嵌套另一个子Table，fixed+嵌套多选实现

比较忙，直接贴代码

<template>
  <div class="app-container">
    <el-button size="mini" @click="handleExpand" class="bp-primary-plain" type="primary" plain>一键展开
    </el-button>
    <el-button size="mini" @click="handlePutAway" class="bp-primary-plain" type="primary" plain>一键收起
    </el-button>
    <el-table ref="tableItemRef" class="bp-table" border :data="tableData">
      <el-table-column width="50" fixed="left" align="center">
        <div slot="header" slot-scope="scope">
          <el-checkbox v-model="globelCheckedAll" @change="clickCheckAll(scope)"
                       :indeterminate="isIndeterminateAll"></el-checkbox>
        </div>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isChecked" :indeterminate="scope.row.isIndeterminate"
                       @change="handleSelectionChange(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="left" type="expand">
        <template slot-scope="props">
          <!-- 展开内容表 -->
          <!--   是否隐藏表头 :show-header="false"-->
          <el-table class="bp-table" :data="props.row.children" row-key="id">
            <el-table-column width="97" align="center">
              <div slot="header" slot-scope="scope">
                <el-checkbox v-model="props.row.isChecked" :indeterminate="props.row.isIndeterminate"
                             @change="handleSelectionChange(props.row)"></el-checkbox>
              </div>
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isChecked"
                             @change="clickCheckItemFn(props.row, scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <!--空占位列-->
            <el-table-column align="center" prop="" min-width="150" label="" show-overflow-tooltip/>
            <el-table-column align="center" prop="itemFunction" width="150" label="工步" show-overflow-tooltip/>
            <el-table-column align="center" prop="potentialFailureMode" min-width="150" label="潜在失效模式"
                             show-overflow-tooltip/>
            <el-table-column align="center" prop="potentialEffectOfFailure" min-width="150" label="潜在失效影响"
                             show-overflow-tooltip/>
            <el-table-column align="center" prop="sev" label="严重度" min-width="70" show-overflow-tooltip/>
            <el-table-column align="center" prop="potentialCauseMechanismOfFailure" min-width="120" label="失效起因/机理"
                             show-overflow-tooltip/>
            <el-table-column align="center" prop="occur" label="频度" min-width="60" show-overflow-tooltip/>
            <el-table-column align="center" prop="currentDesignControls" min-width="180" label="现行过程控制"
                             show-overflow-tooltip/>
            <el-table-column align="center" prop="det" label="探测度" min-width="70" show-overflow-tooltip/>
            <el-table-column align="center" prop="rpn" label="风险度" min-width="70" show-overflow-tooltip/>
            <el-table-column align="center" label="操作" fixed="right" min-width="129">
              <template slot-scope="scope">
                <el-button type="text" size="small"
                           @click="clickDelFn(props.row,props.$index,scope.row,scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="flowChart" fixed="left" label="工序" min-width="150" show-overflow-tooltip/>
      <el-table-column align="center" prop="itemFunction" width="150" label="工步" show-overflow-tooltip/>
      <el-table-column align="center" prop="potentialFailureMode" min-width="150" label="潜在失效模式"
                       show-overflow-tooltip/>
      <el-table-column align="center" prop="potentialEffectOfFailure" min-width="150" label="潜在失效影响"
                       show-overflow-tooltip/>
      <el-table-column align="center" prop="sev" label="严重度" min-width="70" show-overflow-tooltip/>
      <el-table-column align="center" prop="potentialCauseMechanismOfFailure" min-width="120" label="失效起因/机理"
                       show-overflow-tooltip/>
      <el-table-column align="center" prop="occur" label="频度" min-width="60" show-overflow-tooltip/>
      <el-table-column align="center" prop="currentDesignControls" min-width="180" label="现行过程控制"
                       show-overflow-tooltip/>
      <el-table-column align="center" prop="det" label="探测度" min-width="70" show-overflow-tooltip/>
      <el-table-column align="center" prop="rpn" label="风险度" min-width="70" show-overflow-tooltip/>
      <el-table-column align="center" label="操作" fixed="right" min-width="130">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="clickDelFn(props.row,props.$index,scope.row,scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

export default {
  name: "table01",
  data() {
    return {
      isIndeterminateAll: false,
      globelCheckedAll: false,
      tableData: [],
      columns: [
        {
          slot: false,
          slotName: '',
          propName: 'flowChart',
          fixed: false,
          fixedAlign: '',
          align: 'center',
          label: '工序',
          showTooltip: true,
        },
        {
          slot: false,
          slotName: '',
          propName: 'itemFunction',
          fixed: false,
          fixedAlign: '',
          align: 'center',
          label: '工步',
          showTooltip: true,
        },
        {
          slot: false,
          slotName: '',
          propName: 'potentialFailureMode',
          fixed: false,
          fixedAlign: '',
          align: 'center',
          label: '潜在失效模式',
          showTooltip: true,
        },
        {
          slot: false,
          slotName: '',
          propName: 'potentialEffectOfFailure',
          fixed: false,
          fixedAlign: '',
          align: 'center',
          label: '潜在失效影响',
          showTooltip: true,
        },
        {
          slot: false,
          slotName: '',
          propName: 'sev',
          fixed: false,
          fixedAlign: '',
          align: 'center',
          label: '严重度',
          showTooltip: true,
        },
        {
          slot: true,
          slotName: 'Operate',
          propName: '',
          fixed: true,
          fixedAlign: 'right',
          align: 'center',
          label: '操作',
          showTooltip: true,
        }
      ],
      selectedList: [],
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      for (let index = 0; index < 3; index++) {
        this.tableData.push({
            id: index + 1,
            pfmeaId: 237,
            flowChart: "SMT 维修",
            itemFunction: "SMT维修",
            potentialFailureMode: "灯光亮度不够",
            potentialEffectOfFailure: "不能辨认效果,不良流出",
            sev: "3",
            potentialCauseMechanismOfFailure: "起辉器不能正常起辉",
            occur: "5",
            currentDesignControls: "操作员确保工位灯光照明良好",
            det: "2",
            rpn: 30.000,
            isChecked: false,
            isIndeterminate: false,
            children: [
              {
                id: index * 10 + 1,
                flowChart: "SMT 维修",
                itemFunction: "SMT维修",
                potentialFailureMode: "灯光亮度不够",
                potentialEffectOfFailure: "不能辨认效果,不良流出",
                sev: "3",
                potentialCauseMechanismOfFailure: "起辉器不能正常起辉",
                occur: "5",
                currentDesignControls: "操作员确保工位灯光照明良好",
                det: "2",
                rpn: 30.000,
                isChecked: false,
              },
              {
                id: index * 10 + 2,
                flowChart: "SMT 维修",
                itemFunction: "SMT维修",
                potentialFailureMode: "更换物料出错、反向",
                potentialEffectOfFailure: "错料",
                sev: "3",
                potentialCauseMechanismOfFailure: "作业员换错",
                occur: "5",
                currentDesignControls: "IPQC抽检\n参照BOM、丝印图、样板、补料清单补料",
                det: "2",
                rpn: 50.000,
                isChecked: false,
              }
            ]
          }
        )
      }
    },
    handleExpand() {
      this.tableData.forEach(item => {
        this.$refs.tableItemRef.toggleRowExpansion(item, true)
      })
    },
    handlePutAway() {
      this.tableData.forEach(item => {
        this.$refs.tableItemRef.toggleRowExpansion(item, false)
      })
    },
    handleClick(rowData) {
      console.log(rowData, 'rowData')
    },
    // 手动更改全选按钮的状态
    updateCheckedAllBtnStatus(value) {
      // 如果是选了勾选
      if (value) {
        // 检查是否所有数据都手动勾选了
        let isAllChecked = this.tableData.every(v => v.isChecked && !v.isIndeterminate)
        if (isAllChecked) {
          this.globelCheckedAll = true
          this.isIndeterminateAll = false
        } else {
          this.isIndeterminateAll = true
        }
      } else {
        // 检查是否所有数据取消勾选了
        let isAllCancelChecked = this.tableData.every(v => v.isChecked == false)
        if (isAllCancelChecked) {
          this.globelCheckedAll = false
          this.isIndeterminateAll = false
        } else {
          this.isIndeterminateAll = true
        }
      }
    },
    // 全选所有
    clickCheckAll(item) {
      // 此处console的item无效，仅为了eslint校验，而slot-scope="scope"又是必传
      this.selectedList = []
      this.tableData = this.tableData.map(val => {
        val.isChecked = this.globelCheckedAll
        val.children = val.children.map(i => {
          if (this.globelCheckedAll) {
            this.selectedList.push(i.id)
          }
          i.isChecked = this.globelCheckedAll
          return i
        })
        return val
      })
      this.updateCheckedAllBtnStatus(this.globelCheckedAll)
    },
    // 每行选择事件
    handleSelectionChange(val) {
      val.children = val.children.map(i => {
        if (val.isChecked) {
          if (!this.selectedList.includes(i.id)) {
            this.selectedList.push(i.id)
          }
        } else {
          if (this.selectedList.includes(i.id)) {
            this.selectedList.splice(this.selectedList.indexOf(i.id), 1)
          }
        }
        i.isChecked = val.isChecked
        return i
      })
      val.isIndeterminate = false
      this.updateCheckedAllBtnStatus(val.isChecked)
    },

    // 每个小项选择事件-单选
    clickCheckItemFn(row, item) {
      // 如果是选了勾选
      if (item.isChecked) {
        this.selectedList.push(item.id)
        this.isIndeterminateAll = true
        // 检查是否所有数据都手动勾选了
        let isAllChecked = row.children.every(v => v.isChecked)
        if (isAllChecked) {
          row.isChecked = true
          row.isIndeterminate = false
          this.updateCheckedAllBtnStatus(isAllChecked)
        } else {
          row.isIndeterminate = true
        }
      } else {
        this.selectedList.splice(this.selectedList.indexOf(item.id), 1)
        // 检查是否所有数据取消勾选了
        let isAllCancelChecked = row.children.every(v => v.isChecked == false)
        if (isAllCancelChecked) {
          row.isChecked = false
          row.isIndeterminate = false
        } else {
          row.isIndeterminate = true
          this.isIndeterminateAll = true
        }
      }
    },

    // 单项操作-删除
    clickDelFn(row, index, item, itemIndex) {
      console.log(row, index, item, itemIndex)
    }
  }
}
</script>

<style lang="scss" scoped>

//::v-deep .el-table__body-wrapper {
//  .el-table__expanded-cell {
//    z-index: 100;
//    padding: 0;
//  }
//}
//
//::v-deep .el-table__fixed,
//::v-deep.el-table__fixed-right {
//  .el-table__expanded-cell {
//    visibility: hidden;
//    padding: 0;
//  }
//}
//
//.tableChildren {
//  border: 1px solid #ebeef5;
//  width: 100%; //calc(100vw - 200px);// 适合自己项目的宽度就行了
//  background: #fff; //盖住fixed产生的阴影
//  border-bottom: none;
//
//  ::v-deep .is-leaf {
//    height: 40px;
//    color: #1b2e3b;
//    background: #ebeef5;
//  }
//}

</style>