el-table組件顯示樹(shù)形數(shù)據(jù)時(shí),多選框全選無(wú)法選中全部節(jié)點(diǎn)

// 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="序號(hào)" 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: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄',
        childList: [{
            id: 31,
            date: '2016-05-31',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-32',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }],
      treeProps: { children: 'children', hasChildren: 'hasChildren' }, // 樹(shù)狀圖的配置項(xiàng)
      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)
    },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容