美文网首页
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