效果

思路

• 自定義模板
• 當(dāng)點(diǎn)擊某個(gè)行復(fù)選框時(shí)，其所有后代復(fù)選框都要同步狀態(tài)，且其直系父輩狀態(tài)需要根據(jù)所點(diǎn)擊復(fù)選框的狀態(tài)來修正
• 點(diǎn)擊全選復(fù)選框時(shí)，批量同步所有行內(nèi)復(fù)選框狀態(tài)

代碼

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

<template><div><aside>樹型表格復(fù)選框</aside><el-tableref="table":data="rows"row-key="id"borderdefault-expand-all><!--自定義復(fù)選框-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><!--自定義復(fù)選框-end--><el-table-column label="子節(jié)點(diǎn)部分選取" 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="序號(hào)" 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><!--如果涉及分頁,新的數(shù)據(jù)會(huì)直接覆蓋掉原有的,只需要額外的操作將全選復(fù)選框重置即可--><el-button @click="getResource">刷新數(shù)據(jù)</el-button></div> </template><script> export default {name: "tree-table-checkbox",data() {return {rows: [],isFullChecked: false,isIndeterminate: false,}},created() {this.getResource()},watch: {// 直接監(jiān)聽rows數(shù)據(jù)是否變化,重置全選框rows() {this.isFullChecked = falsethis.isIndeterminate = false}},methods: {/** 同步更新子節(jié)點(diǎn)復(fù)選框* isIndeterminate = false checked = false 表現(xiàn)為空 全部子節(jié)點(diǎn)取消勾選* isIndeterminate = false checked = true 表現(xiàn)為選中 全部子節(jié)點(diǎn)勾選* isIndeterminate = true 表現(xiàn)為半選(操作其子節(jié)點(diǎn)的結(jié)果),因此子節(jié)點(diǎn)要改為選中 不修改子節(jié)點(diǎn)狀態(tài) 點(diǎn)擊為全選中* */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)},/***根據(jù)checked自定義加載*1)判斷當(dāng)前checked。* checked ==true 當(dāng)前節(jié)點(diǎn) 變?yōu)閒alse 下級(jí)所有級(jí)別節(jié)點(diǎn)變?yōu)閒alse* checked == false 當(dāng)前節(jié)點(diǎn) 變?yōu)閠rue 下級(jí)所有級(jí)別節(jié)點(diǎn)變?yōu)閠rue*2)雙向遞歸刷新所有節(jié)點(diǎn)checked*/checkRowChange(data) {const vm = this;const { rows } = vm/** tbody中的復(fù)選框不使用v-model，否則會(huì)出現(xiàn) checked=true 需要點(diǎn)兩次才會(huì)變成false的情況* 可參考 https://blog.csdn.net/weixin_41597344/article/details/103196688* 因此這里再事件監(jiān)聽中手動(dòng)取反*/data.checked = !data.checked//鼠標(biāo)勾選/取消勾選 需要同步子節(jié)點(diǎn)狀態(tài)和操作的行一致vm.deepSetChildren(data)/** 遞歸修正* 再整個(gè)數(shù)據(jù)樹中,操作節(jié)點(diǎn)的下層子分支狀態(tài)由操作節(jié)點(diǎn)確定,而其父輩節(jié)點(diǎn)需要根據(jù)操作節(jié)點(diǎn)的情況進(jìn)行判斷。* 這里沒有單獨(dú)找出操作節(jié)點(diǎn)的分支，直接處理了整棵樹* @returns {*}*/const recursion = (node) => {if (node.children && node.children.length > 0) {// 向下遞歸node.children.forEach(d => recursion(d))// 獲取子節(jié)點(diǎn)的情況(有多少勾選的,有多少半選的)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 {// 沒有子節(jié)點(diǎn)的由自身確定狀態(tài)node.isIndeterminate = false}return node}rows.forEach(d => {recursion(d)})//因?yàn)槿x按鈕不在整個(gè)數(shù)據(jù)樹中，需要單獨(dú)判斷數(shù)據(jù)樹一層的情況//如果全部勾選則 【全選框】 勾選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)},/*** 初始化時(shí)設(shè)定isFullChecked = false,每次點(diǎn)擊取反* if isFullChecked == true*設(shè)置所有節(jié)點(diǎn)checked = true* if isFullChecked == false* 設(shè)置所有節(jié)點(diǎn)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))},//獲取列表基礎(chǔ)數(shù)據(jù)getResource() {const vm = this//測(cè)試用數(shù)據(jù)只有一個(gè)根節(jié)點(diǎn) "0" 方便構(gòu)建測(cè)試用數(shù)據(jù)樹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) 簡(jiǎn)單處理數(shù)據(jù)用于自定義渲染; checked: indeterminate:data.forEach(d => {d.checked = false //是否選中d.isIndeterminate = false//是否是半選狀態(tài)})vm.rows = vm.makeTree(data, 'id', 'parentId', '0')},/*** 構(gòu)建樹,與復(fù)選邏輯無關(guān)* @param data* @param idMark* @param pIdMark* @param rootId* @returns {*}*/makeTree(data, idMark, pIdMark, rootId) {//轉(zhuǎn)化為字典，id為鍵值，并添加根節(jié)點(diǎn)對(duì)象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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。