el-table组件显示树形数据时,多选框全选无法选中全部节点

// html
  <el-table
      v-adaptive="{bottomOffset: 80}"
      height="100px"
      :data="tableData"
      row-key="id"
      :tree-props="{children: 'childList'}"
      ref="multipleTable"
      @select-all="selectAll"
      @selection-change="handleSelectionChange"
      stripe
      size="small"
    >
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column type="index" label="序号" width="80" />
       <el-table-column prop="date" label="日期" width="180" />
       <el-table-column prop="name" label="姓名" width="180" />
       <el-table-column prop="address" label="地址" />
    </el-table>
  data() {
    return {
      checkedKeys: false,
      tableData: [{
        id: 1,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        childList: [{
            id: 31,
            date: '2016-05-31',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-32',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      treeProps: { children: 'children', hasChildren: 'hasChildren' }, // 树状图的配置项
      total: 0,
      pageSize: 10
    }
  },

// methods
    selectAll() {
      this.checkedKeys = !this.checkedKeys;
      this.changeSelectStatus(this.tableData, this.checkedKeys);
    },

    changeSelectStatus(data, selected) {
        data.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, selected)
            if (row.childList) {
                this.changeSelectStatus(row.childList, selected)
            }
        })
    },

    handleSelectionChange(val) {
      console.log(val)
    },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容