vue element table 树形表格 checkbox 全选反选

树形表格带checkbox ，实现结果： 选中父节点 子节点全部选中 反之；子节点如果有一个被选中 父节点选中， 没有一个选中 父节点 取消选中；
html：

      <el-table :data="tableData" style="width: 100%;" row-key="id">
        <el-table-column prop="date" label="物资编码" width="255">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" :key="scope.row.id" @change="handleCheckAllChange(scope.row)">
              {{scope.row.date + ' '+ `${scope.row.zje?'￥'+scope.row.zje:''}`}}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="物资名称">
        </el-table-column>
        <el-table-column prop="address" label="集团采购">
        </el-table-column>
        <el-table-column prop="address" label="物资型号">
        </el-table-column>
        <el-table-column prop="address" label="物资品牌">
        </el-table-column>
        <el-table-column prop="address" label="数量">
        </el-table-column>
        <el-table-column prop="address" label="含税单价">
        </el-table-column>
        <el-table-column prop="address" label="税率">
        </el-table-column>
        <el-table-column prop="address" label="含税总价">
        </el-table-column>
        <el-table-column prop="address" label="仓库">
        </el-table-column>
        <el-table-column prop="address" label="申请部门">
        </el-table-column>
        <el-table-column prop="address" label="申请人">
        </el-table-column>
        <el-table-column prop="address" label="申请时间">
        </el-table-column>
      </el-table>
    </div>

data：

 tableData: [{
        id: 3,
        date: '武汉XXXX有限公司',
        zje: '10000',
        children: [{
          id: 31,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '99'
        }, {
          id: 32,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '99'
        }]
      }, {
        id: 4,
        date: '武汉XXXX有限公司',
        zje: '10000',
        children: [{
          id: 34,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '99'
        }, {
          id: 35,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '99'
        }, {
          id: 36,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '9900'
        }, {
          id: 37,
          date: 'M110000030',
          name: '固定值（元/月）',
          address: '919'
        }]
      }],

methods：

 // 列表 正选反选
    handleCheckAllChange(row) {
      this.tableData.forEach((item) => {
        //判断是否 有子节点
        if ("children" in item) {
          item.children.forEach(i => {
            //点击父节点 子节点状态 = 父节点状态
            if (row.id === item.id) {
              i.checked = row.checked;
            };
            //点击子节点
            if (i.id === row.id) {
              //父节点状态 = 子节点
              item.checked = row.checked;
              //判断子节点是否有选中的 如果有一个就选中
              item.children.forEach(v => {
                if (v.checked) {
                  item.checked = true;
                };
              });
            };
          });
        };
      });
    },

复制即用 希望对你有帮助~