element el-table树形表格结构，勾选联动 父级勾选，子级全部选中，勾选子级，父级显示勾选状态

需求实现如下

重点使用到 @select 以及 @select-all 两个方法

返回数据格式

代码实现

 <el-table ref="tableRef" :cell-style="{ color: '#FFF', background: '#333' }"
      :header-cell-style="{ color: '#FFF', background: '#333' }" 
      row-key="id" :data="tableData" style="width: 100%"
      :default-sort="{ prop: 'barcode.putInDate', order: 'descending' }"
      @select="select" 
      @select-all="selectAll"
      @sort-change="sortChange" :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      }
  ">
      <template slot="empty">
        <span style="color: #969799">{{ $t("NeoLight.empty") }}span>
      template>
      <el-table-column type="selection" width="50" />
      <el-table-column prop="barcode" :sortable="true" :label="$t('NeoLight.barcodeNo')" width="180" />
      <el-table-column prop="partNumber" :sortable="true" :label="$t('NeoLight.stockNo')" width="150" />
      <el-table-column prop="produceDate" :sortable="true" :label="$t('NeoLight.produceDate')" />
      <el-table-column prop="expireDate" :sortable="true" :label="$t('NeoLight.expireDate')" />
       <el-table-column prop="batch" :sortable="true" :label="$t('barcode.batch')" />
      
      <el-table-column prop="provider" :sortable="true" :label="$t('storagePos.providerNumber')" />
      <el-table-column prop="posName" :sortable="true" :label="$t('NeoLight.storageNo')" />
el-table>

js方法

 methods: {
 //从查询接口中获取到表格数据并组装数据
     getList() {
      getStoFind(this.crud.query)
        .then((res) => {
          if (res.totalElements) {
            this.tableData = [];
            this.ids = []
            this.totalPageNum = res.totalElements
            res.content.forEach((item) => {
              if (item.barcode && item.barcode.children && item.barcode.children.length > 0) {
                item.barcode.children.map(ch => {
                  ch.posId = item.id
                  ch.parentId = item.barcode.id
                })
              }
              item.barcode.posId = item.id;
              this.tableData.push(item.barcode);
            });
          }
        })
    },
    select(selection, row) {
      let vm = this
      // 操作行 row 在 已选范围 selection 内，认为是选中，否则是取消选中 
      if (selection.some((el) => row.id
        === el.id
      )) {
        // 设置当前行选中状态
        row.isChecked = true
        // 记录选中id 
        this.addId(row)
        // 若存在子级，自己全选
        if (row.children) {
          row.children.map(c => {
            this.$refs.tableRef.toggleRowSelection(c, true)
            c.isChecked = true
            this.addId(c)
          })
        }
        // 若存在父级，设置父级选中
        if (row.parentId) {
          let pNode = vm.tableData.find(x => x.id === row.parentId)
          this.$refs.tableRef.toggleRowSelection(pNode, true)
          pNode.isChecked = true
          this.addId(pNode)
        }
      } else {
        row.isChecked = false
        this.deleteId(row)
        // 若存在子级，子级全部取消选中
        if (row.children) {
          row.children.map((i) => {
            this.$refs.tableRef.toggleRowSelection(i, false)
            i.isChecked = false
            this.deleteId(i)
          })
        }
        // 若存在父级，判断父级的子级(当前行的兄弟) ，若全部未选中，取消父级选中
        if (row.parentId) {
          let pNode = vm.tableData.find(x => x.id === row.parentId)
          if (!pNode.children.some(el => el.isChecked == true)) {
            this.$refs.tableRef.toggleRowSelection(pNode, false)
            pNode.isChecked = false
            this.deleteId(pNode)
          }
        }
      }
    },
    selectAll(selection) {
      // 判断当前是否有已选中的
      let rA = this.tableData.some(el => {
        let r = false
        if (el.children) {
          r = el.children.some(e => e.isChecked)
        }
        if (r) return r
        return el.isChecked
      })
      // 若有选中则全部取消，否则全部选中
      if (rA) {
        this.tableData.forEach(el => {
          el.isChecked = false
          this.$refs.tableRef.toggleRowSelection(el, false)
          this.deleteId(el)
          if (el.children) {
            el.children.forEach(e => {
              e.isChecked = false
              this.$refs.tableRef.toggleRowSelection(e, false)
              this.deleteId(e)
            })
          }
        })
      } else {
        this.tableData.forEach(el => {
          el.isChecked = true
          this.$refs.tableRef.toggleRowSelection(el, true)
          this.addId(el)
          if (el.children) {
            el.children.forEach(e => {
              e.isChecked = true
              this.$refs.tableRef.toggleRowSelection(e, true)
              this.addId(e)
            })
          }
        })
      }
    },
    // 增加选中
    addId(o) {
      let id = o.posId
      if (this.ids.indexOf(id) < 0) {
        this.ids.push(id)
      }
    },
    // 删除选中
    deleteId(o) {
      let id = o.posId
      this.ids = this.ids.filter(item => item !== id);
    },
}