效果

思路

• 自定義模板
• 當點擊某個行復選框時，其所有后代復選框都要同步狀態，且其直系父輩狀態需要根據所點擊復選框的狀態來修正
• 點擊全選復選框時，批量同步所有行內復選框狀態

代碼

非封裝組件，按需自行改寫
確保引入element-ui 的情況下直接新增如下代碼的vue組件即可，部分數據檢索和批處理存在優化空間。

<template><div><aside>樹型表格復選框</aside><el-tableref="table":data="rows"row-key="id"borderdefault-expand-all><!--自定義復選框-start--><el-table-column label="全選" width="160" align="center"><template slot="header" slot-scope="scope"><el-checkbox :indeterminate="isIndeterminate" v-model="isFullChecked" @change="checkAllChange"/></template><template slot-scope="{row}"><el-checkbox :indeterminate="row.isIndeterminate" :value="row.checked" @change="checkRowChange(row)"/></template></el-table-column><!--自定義復選框-end--><el-table-column label="子節點部分選取" prop="isIndeterminate" width="160" align="center"><template slot-scope="{row}">{{row.isIndeterminate?'true':'false'}}</template></el-table-column><el-table-column label="是否選中" prop="checked" width="160" align="center"><template slot-scope="{row}">{{row.checked?'true':'false'}}</template></el-table-column><el-table-column type="index" label="序號" width="60" align="center"></el-table-column><el-table-column prop="id" label="ID" align="center" width="160"></el-table-column><el-table-column prop="parentId" label="PARENT_ID" align="center" width="160"></el-table-column></el-table><br><!--如果涉及分頁,新的數據會直接覆蓋掉原有的,只需要額外的操作將全選復選框重置即可--><el-button @click="getResource">刷新數據</el-button></div> </template><script> export default {name: "tree-table-checkbox",data() {return {rows: [],isFullChecked: false,isIndeterminate: false,}},created() {this.getResource()},watch: {// 直接監聽rows數據是否變化,重置全選框rows() {this.isFullChecked = falsethis.isIndeterminate = false}},methods: {/** 同步更新子節點復選框* isIndeterminate = false checked = false 表現為空 全部子節點取消勾選* isIndeterminate = false checked = true 表現為選中 全部子節點勾選* isIndeterminate = true 表現為半選(操作其子節點的結果),因此子節點要改為選中 不修改子節點狀態 點擊為全選中* */deepSetChildren(data) {const { isIndeterminate, checked } = dataconst recursionSetChecked = (arr, checked) => {if (arr && arr.length > 0) {arr.forEach(d => {d.checked = checkedd.isIndeterminate = falserecursionSetChecked(d.children, checked)})}}recursionSetChecked(data.children, isIndeterminate ? true : checked)},/***根據checked自定義加載*1)判斷當前checked。* checked ==true 當前節點 變為false 下級所有級別節點變為false* checked == false 當前節點 變為true 下級所有級別節點變為true*2)雙向遞歸刷新所有節點checked*/checkRowChange(data) {const vm = this;const { rows } = vm/** tbody中的復選框不使用v-model，否則會出現 checked=true 需要點兩次才會變成false的情況* 可參考 https://blog.csdn.net/weixin_41597344/article/details/103196688* 因此這里再事件監聽中手動取反*/data.checked = !data.checked//鼠標勾選/取消勾選 需要同步子節點狀態和操作的行一致vm.deepSetChildren(data)/** 遞歸修正* 再整個數據樹中,操作節點的下層子分支狀態由操作節點確定,而其父輩節點需要根據操作節點的情況進行判斷。* 這里沒有單獨找出操作節點的分支，直接處理了整棵樹* @returns {*}*/const recursion = (node) => {if (node.children && node.children.length > 0) {// 向下遞歸node.children.forEach(d => recursion(d))// 獲取子節點的情況(有多少勾選的,有多少半選的)const sumChecked = node.children.filter(d => d.checked).lengthnode.isIndeterminate = sumChecked > 0 && sumChecked < node.children.lengthif (node.children.some(d => d.isIndeterminate)) {node.isIndeterminate = true}node.checked = sumChecked !== 0} else {// 沒有子節點的由自身確定狀態node.isIndeterminate = false}return node}rows.forEach(d => {recursion(d)})//因為全選按鈕不在整個數據樹中，需要單獨判斷數據樹一層的情況//如果全部勾選則 【全選框】 勾選if (rows.every(d => d.checked)) {vm.isFullChecked = true}//如果全部勾選則 【全選框】 取消勾選if (rows.every(d => !d.checked)) {vm.isFullChecked = false}//如果是存在半選或存在未選且有已選或半選 則 【全選框】半選vm.isIndeterminate = rows.some(d => d.isIndeterminate) ? true : rows.some(d => !d.checked) && rows.some(d => d.checked)},/*** 初始化時設定isFullChecked = false,每次點擊取反* if isFullChecked == true*設置所有節點checked = true* if isFullChecked == false* 設置所有節點checked = false*/checkAllChange() {const vm = thisconst { rows } = vmconst recursionSetChecked = (item, checked) => {item.checked = checkeditem.isIndeterminate = falseif (item.children && item.children.length > 0) {item.children.forEach(d => recursionSetChecked(d, checked))}}this.isIndeterminate = falserows.forEach(d => recursionSetChecked(d, vm.isFullChecked))},//獲取列表基礎數據getResource() {const vm = this//測試用數據只有一個根節點 "0" 方便構建測試用數據樹const data = [{ id: '1', parentId: '0' },{ id: '2', parentId: '0' },{ id: '2-0', parentId: '2' },{ id: '1-0', parentId: '1' },{ id: '1-1', parentId: '1' },{ id: '1-1-0', parentId: '1-1' },{ id: '1-1-0-0', parentId: '1-1-0' },{ id: '1-1-0-1', parentId: '1-1-0' },{ id: '1-2', parentId: '1' },{ id: '1-2-0', parentId: '1-2' },{ id: '1-2-1', parentId: '1-2' },]//1) 簡單處理數據用于自定義渲染; checked: indeterminate:data.forEach(d => {d.checked = false //是否選中d.isIndeterminate = false//是否是半選狀態})vm.rows = vm.makeTree(data, 'id', 'parentId', '0')},/*** 構建樹,與復選邏輯無關* @param data* @param idMark* @param pIdMark* @param rootId* @returns {*}*/makeTree(data, idMark, pIdMark, rootId) {//轉化為字典，id為鍵值，并添加根節點對象let nodeDict = {};(nodeDict[rootId] = { children: [] })[idMark] = rootId;data.forEach(n => {(nodeDict[n[idMark]] = n).children = [];});data.forEach(function (d) {let parentNode = nodeDict[d[pIdMark]];if (parentNode) {parentNode.children.push(d);}});return nodeDict[rootId].children;}} } </script><style scoped></style>

總結

以上是生活随笔為你收集整理的element-ui 可复选树型表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。