elementUI 表格树的多选

  <div class="step-box">
    <div class="right-container">
      <div class="wrapper-box">
        <div class="source-box">
                <div>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :size="size"
                    :tree-props="defaultProps"
                  >
                    <el-table-column width="50" type="index">
                      <template slot="header" slot-scope="scope">
                        <el-checkbox :value="isCheckedAll" :temp="scope" @change="changeAll($event)" />
                      </template>
                      <template #default="{ row }">
                        <el-checkbox
                          v-model="row.checked"
                          @change="changeItem($event, row)"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="名称"
                      width="180"
                    />
                    <el-table-column
                      prop="indexType"
                      label="类别"
                      width="180"
                    />
                    <el-table-column
                      prop="unit"
                      label="单位"
                    />
                    <el-table-column
                      prop="indexType"
                      label="计算方式"
                    />
                    <el-table-column
                      prop="indexType"
                      label="显示方式"
                    />
                    <el-table-column
                      prop="indexType"
                      label="生成方式"
                    />
                      <el-table-column
                        label="操作"
                        width="120px"
                      >
                        <template #default="scope">
                          <el-button
                            type="text"
                            icon="el-icon-edit"
                            :size="size"
                            @click="onOpenConfig(scope.row)"
                          >配置</el-button>
                        </template>
                      </el-table-column>
                  </el-table>
                </div>
                <div />
              </div>
      </div>
      <div class="btns-box">
        <el-button
          type="default"
          plain
          :size="size"
          @click="onPre"
        >上一步</el-button>
        <el-button
          :loading="saving"
          plain
          type="primary"
          :size="size"
          @click="onSave"
        >保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Step5',
  data() {
    return {
      tableData: [{
        id: 2,
        unit: 'tCO2',
        name: '二氧化碳排放总量',
        indexType: '1',
        address: '上海市普陀区金沙江路 1517 弄',
        checked: false,
        children: [{
          id: 3,
          unit: 'tCO2',
          name: '燃料燃烧排放量',
          indexType: '1',
          address: '上海市普陀区金沙江路 1519 弄',
          checked: false,
          children: [{
            id: 31,
            unit: 't',
            name: '烟煤消耗量',
            indexType: '1',
            address: '上海市普陀区金沙江路 1519 弄',
            checked: false
          }, {
            id: 32,
            unit: 't',
            name: '柴油消耗量',
            indexType: '1',
            address: '上海市普陀区金沙江路 1519 弄',
            checked: false
          }]
        }]
      }, {
        id: 4,
        unit: 'tCO2',
        name: '二氧化碳排放总量',
        indexType: '1',
        address: '上海市普陀区金沙江路 1517 弄',
        checked: false,
        children: [{
          id: 5,
          unit: 'tCO2',
          name: '燃料燃烧排放量',
          indexType: '1',
          address: '上海市普陀区金沙江路 1519 弄',
          checked: false,
          children: [{
            id: 51,
            unit: 't',
            name: '烟煤消耗量',
            indexType: '1',
            address: '上海市普陀区金沙江路 1519 弄',
            checked: false
          }, {
            id: 52,
            unit: 't',
            name: '柴油消耗量',
            indexType: '1',
            address: '上海市普陀区金沙江路 1519 弄',
            checked: false
          }]
        }]
      }],
      loading: false,
      saving: false,
      size: 'small',
      defaultProps: { children: 'children', hasChildren: 'hasChildren' },
      isCheckedAll: false,
      configDrawer: {
        title: '配置',
        visible: false,
        current: null
      }
    }
  },
  watch: {
    tableData: {
      handler(v) {
        console.log('v', v)
        this.isCheckedAll = this._isTreeChecked(v)
        console.log('isCheckedAll', this.isCheckedAll)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    /**
     * 树节点是否全部选中
     * @param tree
     * @returns {boolean}
     * @private
     */
    _isTreeChecked(tree) {
      for (const node of tree) {
        if (node.checked === false) {
          return false
        }
        if (node.children && node.children.length > 0) {
          const childResult = this._isTreeChecked(node.children)
          if (!childResult) {
            return false
          }
        }
      }
      return true
    },
    /**
     * 点击全选/取消全选按钮
     * @param bool
     */
    changeAll(bool) {
      this.setChildren(this.tableData, bool)
    },
    /**
     * 设置children选中/取消选中
     * @param children
     * @param bool
     */
    setChildren(children, bool) {
      children.forEach(v => {
        v.checked = bool
        if (v.children && v.children.length > 0) {
          this.setChildren(v.children, bool)
        }
      })
    },
    /**
     * 点击单个选中按钮
     * @param bool
     * @param row
     */
    changeItem(bool, row) {
      row.checked = bool
      // 设置子孙元素选中/取消选中
      if (row.children && row.children.length > 0) {
        this.setChildren(row.children, bool)
      }
      // 如果是选中，祖先也应被选中
      if (bool) {
        updateCheckedStatus(this.tableData, row.id)
      }

      /**
       * 设置该json的某节点的checked属性为true时，它的所有上级节点的checked属性也改为true
       * @param jsonData
       * @param nodeId
       * @returns {*}
       */
      function updateCheckedStatus(jsonData, nodeId) {
        function updateParents(node, id) {
          if (node.id === id) {
            node.checked = true
            return true
          }
          if (node.children) {
            for (const child of node.children) {
              if (updateParents(child, id)) {
                node.checked = true
                return true
              }
            }
          }
          return false
        }

        for (const item of jsonData) {
          updateParents(item, nodeId)
        }

        return jsonData
      }
    },
    onNext() {
      this.$emit('onNext')
    },
    onPre() {
      this.$emit('onPre')
    },
    loadNode(node, resolve) {

    },
    onCurrentChange(data) {

    },
    addUnit(item) {
      item.tableData.push({
        name: ''
      })
    },
    onSave() {
      console.log()
    },
    onOpenConfig(row) {
      this.configDrawer.current = row
      this.configDrawer.title = '配置'
      this.configDrawer.visible = true
    },
    onConfigSave(){
      this.configDrawer.visible = false
    },
    onConfigCancel(){
      this.configDrawer.visible = false
    },
  }
}
</script>

<style scoped lang="scss">
.step-box{
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
  .right-container{
    flex: 1;
    overflow: hidden;
    .unit-box{
      .el-form-item--small.el-form-item{
        margin-bottom: 0;
      }
    }
    .source-box{

    }
  }
}
.btns-box{
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>