如圖，同事讓幫忙實(shí)現(xiàn)一個(gè)需求
?從二級(jí)樹節(jié)點(diǎn)開始，同時(shí)選中的只能有一個(gè)二級(jí)樹節(jié)點(diǎn)，選中的二級(jí)樹節(jié)點(diǎn)之下的子節(jié)點(diǎn)都可以被選中。否則不能被選中
直接上代碼
需要注意的是，文中樹狀圖傳遞的數(shù)據(jù)是打平的數(shù)據(jù)，設(shè)置代碼是下圖，而不是樹狀圖!!
:tree-config="{transform: true, rowField: 'cguid', parentField: 'cparentid'}" ?上述的這一點(diǎn)非常重要
下面的全乎的數(shù)據(jù)圖文章來源：http://www.zghlxwxcb.cn/news/detail-690499.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入組件 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.6.9"></script>
<script src="data.js"></script>//這個(gè)是我通過js引入的打平的數(shù)據(jù)，其中爆露出來的變量是dataList，在第二個(gè)js文件中
</head>
<body>
<div id="app">
<vxe-table ref="treeNode" resizable :tree-config="{transform: true, rowField: 'cguid', parentField: 'cparentid'}" :data="tableData"
:checkbox-config="{labelField: 'cguid', highlight: true,visibleMethod:()=>true,checkMethod:()=>true}"
@checkbox-change="selectChangeEvent">
<vxe-column type="checkbox" title="ID" width="280" tree-node></vxe-column>
<vxe-column field="cname" title="Name"></vxe-column>
</vxe-table>
</div>
</body>
1：刪除
2:節(jié)點(diǎn)禁用
3:篩選
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData: [],
chooseDataTree: null,//選中的樹節(jié)點(diǎn)的內(nèi)容
data2tree: [],//將打平數(shù)據(jù)封裝成樹結(jié)構(gòu)
}
},
created() {
this.tableData = dataList;
//將數(shù)據(jù)改為樹狀結(jié)構(gòu)
children = getJsonTree(dataList, '000000');
//遍歷需要這種結(jié)構(gòu)
this.data2tree = {
cguid: "000000",
children,
}
},
methods: {
selectChangeEvent({ $table, indeterminates, row, records }) {
console.log(arguments)
//將當(dāng)前選中的數(shù)據(jù) 被選中子節(jié)點(diǎn)到root的數(shù)據(jù)
this.handleCheckChange([...records, ...indeterminates],row)
},
handleCheckChange(data,row) {
//整理成樹狀圖
let chooseTree = getJsonTree(data, '000000')
//當(dāng)前選中節(jié)點(diǎn)是不是在第一次選中的樹節(jié)點(diǎn)中
let bool = this.checkMethod({row,chooseTree,chooseList:data})
console.log('bool:',bool)
//不再就不讓勾選，同時(shí)提示
if(!bool){
this.$refs.treeNode.setCheckboxRow(row,false)
VXETable.modal.message('當(dāng)前無法被選中')
}
},
checkMethod({ chooseList,row ,chooseTree}) {
//有選中的數(shù)據(jù)
if (chooseList.length > 0 ) {
//已經(jīng)存在選中的tree
if(this.chooseDataTree){
//已經(jīng)選中的tree中是否存在當(dāng)前選中的項(xiàng)
let haveBool = hasChildNode(this.chooseDataTree, row.cguid);
return haveBool
}
//獲取選中的樹表格
let chooseTreeData = chooseTree[0];
//從樹表格中獲取第二級(jí)的節(jié)點(diǎn)（只有選中節(jié)點(diǎn)數(shù)據(jù)）
let leve2Item = chooseTreeData.children[0];
//從完整的樹表中獲取完整的指定節(jié)點(diǎn)數(shù)據(jù)
let getThenTree = getLeafNode(this.data2tree, leve2Item.cguid);
//將選中的二級(jí)節(jié)點(diǎn)保存起來 用于校驗(yàn)
this.setChooseDataTree(getThenTree);
//檢查當(dāng)前節(jié)點(diǎn)是不是在選中的二級(jí)節(jié)點(diǎn)之中
let haveBool = hasChildNode(getThenTree, row.cguid);
console.log('getThenTree:',getThenTree.cname,getThenTree);
console.log('row:',row.cname,row)
return haveBool
} else {
console.log('選中的內(nèi)容空空如也')
//將選中內(nèi)容置空
this.setChooseDataTree(null);
return true
}
},
//設(shè)置選中后的數(shù)據(jù)內(nèi)容
setChooseDataTree(data){
this.chooseDataTree = data
}
}
})
//講打平的數(shù)據(jù)組將組為樹狀圖
function getJsonTree(data, cparentid) {
var result = [], temp;
for (var i = 0; i < data.length; i++) {
if (data[i].cparentid == cparentid) {
if (cparentid === "000000") data[i]['disabled'] = true;
var obj = { "name": data[i].cname, "id": data[i].cguid };
obj = Object.assign(obj, data[i]);
temp = this.getJsonTree(data, data[i].cguid);
if (temp.length > 0) {
obj.children = temp;
}
result.push(obj);
}
}
return result;
}
//指定的節(jié)點(diǎn)中是否包含相應(yīng)的子節(jié)點(diǎn)
function hasChildNode(root, cguid) {
if (root == null) {
return false;
}
if (root.cguid === cguid) {
return true;
}
let found = false;
if (root.children && root.children.length > 0) {
root.children.forEach(child => {
if (hasChildNode(child, cguid)) {
found = true;
}
});
}
return found;
}
//從樹的表格中獲取指定字節(jié)點(diǎn)內(nèi)容數(shù)據(jù)
function getLeafNode(root, cguid) {
if (root == null) {
return null;
}
if (root.cguid == cguid) {
return root;
}
let result = null;
if (root.children && root.children.length > 0) {
root.children.forEach(child => {
const leafNode = getLeafNode(child, cguid);
if (leafNode != null) {
result = leafNode;
}
});
}
return result;
}
</script>
</html>json打平的數(shù)據(jù)結(jié)構(gòu)是文章來源地址http://www.zghlxwxcb.cn/news/detail-690499.html
const dataList = [
{
"cguid": "5422",
"ccode": "01",
"cname": "01 資產(chǎn)",
"cparentid": "000000",
"ileaf": "0"
},
{
"cguid": "70",
"ccode": "1004",
"cname": "1004 匯總科目",
"cparentid": "5422",
"ileaf": "0"
},
{
"cguid": "78",
"ccode": "100401",
"cname": "100401 匯總科目1",
"cparentid": "70",
"ileaf": "1"
},
{
"cguid": "95",
"ccode": "100402",
"cname": "100402 匯總科目2",
"cparentid": "70",
"ileaf": "1"
},
{
"cguid": "47",
"ccode": "100403",
"cname": "100403 匯總科目3",
"cparentid": "70",
"ileaf": "1"
},
{
"cguid": "87",
"ccode": "100404",
"cname": "100404 匯總科目4",
"cparentid": "70",
"ileaf": "0"
},
{
"cguid": "97",
"ccode": "10040401",
"cname": "10040401 匯總科目4-1",
"cparentid": "87",
"ileaf": "1"
},
{
"cguid": "41",
"ccode": "90000201",
"cname": "90000201 B2c1",
"cparentid": "31",
"ileaf": "1"
},
{
"cguid": "77",
"ccode": "90000202",
"cname": "90000202 B2c2",
"cparentid": "31",
"ileaf": "1"
},
{
"cguid": "428",
"ccode": "1001",
"cname": "1001 庫xxx",
"cparentid": "422",
"ileaf": "1"
},
{
"cguid": "430",
"ccode": "1002",
"cname": "1002 銀xxx",
"cparentid": "422",
"ileaf": "1"
},
]到了這里，關(guān)于vxe-table中樹形結(jié)構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![vxe-table 鼠標(biāo)滑動(dòng)選擇多行,鼠標(biāo)區(qū)域選中批量操作[2]](https://imgs.yssmx.com/Uploads/2024/02/755215-1.png)
