el-table表格樹狀圖復選框全選問題

應用場景

表格數據有層級關系，需要用到表格的樹狀圖結構！！！，同時，可全選表格數據，跟全勾選子節點數據，效果如下

 

 

 實現方法

根據element官網實現，實現完，發現樹形表格加復選框后，子結構無法選中的問題。於是在table上監聽點擊和全選，根據數據有子節點來手動切換選中與否。

解決方法如下：

template如下：

 

<el-table
  ref="table"
  :data="tableData"
  style="width: 100%;margin-bottom: 20px;"
  row-key="id"
  border
  :indent="50"
  :select-on-indeterminate="false"
  @select="select"
  @select-all="selectAll"
  @selection-change="selectionChange"
  default-expand-all
  :tree-props="{children: 'childList'}">
  <el-table-column
  type="selection"
  width="55">
  </el-table-column>
  <el-table-column
  prop="date"
  label="日期"
  sortable
  width="180">
  </el-table-column>
  <el-table-column
  prop="name"
  label="姓名"
  sortable
  width="180">
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址">
  </el-table-column>
</el-table>

 

data格式如下

        data () {
            return {
                checkedKeys: false, // 是否全部選中
                isLoading: true,
                treeProps: { children: 'children', hasChildren: 'hasChildren' } // 樹狀圖的配置項
            }
        },

 

數據格式

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 弄'
  }]

script代碼如下

實現全選功能

            setChildren (children, type) {
                // 編輯多個子層級
                children.map(j => {
                    this.toggleSelection(j, type)
                    if (j.childList) {
                        this.setChildren(j.childList, type)
                    }
                })
            },
            // 選中父節點時，子節點一起選中取消
            select (selection, row) {
                if (selection.some(el => { return row.id === el.id })) {
                    if (row.childList) {
                        // row.childList.map(j => {
                        //     this.toggleSelection(j, true)
                        // })
                        // 解決子組件沒有被勾選到
                        this.setChildren(row.childList, true)
                    }
                } else {
                    if (row.childList) {
                        // row.childList.map(j => {
                        //     this.toggleSelection(j, false)
                        // })
                        this.setChildren(row.childList, false)
                    }
                }
            },
            toggleSelection (row, select) {
                if (row) {
                    this.$nextTick(() => {
                        this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
                    })
                }
            },
            // 選擇全部
            selectAll (selection) {
                // tabledata第一層只要有在selection里面就是全選
                const isSelect = selection.some(el => {
                    const tableDataIds = this.tableData.map(j => j.id)
                    return tableDataIds.includes(el.id)
                })
                // tableDate第一層只要有不在selection里面就是全不選
                const isCancel = !this.tableData.every(el => {
                    const selectIds = selection.map(j => j.id)
                    return selectIds.includes(el.id)
                })
                console.log(isSelect, 'isSelect')
                if (isSelect) {
                    selection.map(el => {
                        if (el.childList) {
                            // el.childList.map(j => {
                            //     this.toggleSelection(j, true)
                            // })
                            // 解決子組件沒有被勾選到
                            this.setChildren(el.childList, true)
                        }
                    })
                }
                if (isCancel) {
                    this.tableData.map(el => {
                        if (el.childList) {
                            // el.childList.map(j => {
                            //     this.toggleSelection(j, false)
                            // })
                            // 解決子組件沒有被勾選到
                            this.setChildren(el.childList, false)
                        }
                    })
                }
                this.$emit('handleSelect', this.tableData)
            }

select函數是表示選中父節點，子節點跟着選中，selectAll是選中全部

 經過上面的方法。我們的復選框，子節點不被選中問題已經解決，到時候這個時候會發現，我們在觸發全部選中的方法select-all時，會同時觸發selection-change方法，這時候穿給后端的是整個表格的數據，但是我們只需要傳給后端父節點，我們可以通過下面的方法來進行過濾

let tableAllId = this.tableData.map(item => item.nodeKey) // 所有父節點的id
                let selectIds = rows.map(item => item.nodeKey)  // 所有選中的節點id集合
                let isAllSelect = tableAllId.every(item => selectIds.includes(item))
                if (isAllSelect) {
                    // 全選表格數據
                    this.currentSelectedRows = tableAllId
                } else {
                    this.currentSelectedRows = selectIds
                }