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

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

作者: 优秀的收藏转载分享 | 来源:发表于2021-12-14 18:46 被阅读0次
// 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)
    },

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/woryfrtx.html