el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼
更新時間：2022年08月18日 10:49:00 作者：吳明_yst
本文主要介紹了el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
效果
要求：火車的【硬座】和【軟臥】只有選擇一個。
實現(xiàn)效果：【上半年度出行】和【下半年度出行】的火車等級每個只能選擇一項。
1、首先查看官網
選擇案例并粘貼到本地IDE中。
源碼放到文末
2、熟悉基本的代碼
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="value"
ref="tree"
empty-text="no data"
:check-on-click-node="true"
highlight-current
@check="changeTree"
:props="defaultProps">
</el-tree>
data() {
return {
data: [...],
// 設置每個節(jié)點的屬性
defaultProps: {
children: 'children',
label: 'label',
id: 'value',
disabled: 'selectable'
}
};
},
2.1、參數(shù)說明：defaultProps
- children： 設置子節(jié)點的數(shù)組名稱
- label： 樹節(jié)點顯示名稱
- id: 樹節(jié)點的ID (不可以重復)
- disabled: 是否可以被選中
2.2、對應的數(shù)據(jù)結構
data() {
return {
data: [{
value: '001',
label: '上半年度出行',
selectable: 'false',
children: [{}]
},{
value: '002',
label: '下半年出行',
selectable: 'false', // 注意這里是字符串，'false'
children: [{
value: '002-101',
label: '火車',
selectable: 'false',
children: [{}]
}]
}],
// 設置每個節(jié)點的屬性
defaultProps: {
children: 'children',
label: 'label',
id: 'value',
disabled: 'selectable'
}
};
2.3、為什么要使用disabled屬性呢？
思路：三層數(shù)據(jù)數(shù)據(jù)，葉子節(jié)點實現(xiàn)單選，但是如果點擊父節(jié)點時，會實現(xiàn)葉子節(jié)點的全選，需要進行更多的數(shù)據(jù)處理。因此為了解決這個麻煩。引入disabled屬性，讓第一級和第二級為不可選中，只有葉子節(jié)點可以點擊選中，這樣來減少數(shù)據(jù)的判斷。
實現(xiàn)效果：
3、添加check事件，實現(xiàn)單選。
每次點擊樹節(jié)點選框，出發(fā)check事件changeTree。此時存在兩種情況，情況一：點擊選中；情況二：點擊取消。
情況一： 點擊選中
// 處理選擇數(shù)據(jù)
changeTree(data, list){
console.log(data); // {value: '002-101-301', label: '硬座'}
console.log(list); // {checkedKeys: ['002-101-301']}
// 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
let checkedKeys = list.checkedKeys;
console.log(checkedKeys) // ['002-101-301']
let checked = checkedKeys.indexOf(data.value); // data.value : 002-101-301
console.log(checked); // 0 ps: 返回-1時，表示數(shù)組不存在某個元素
// 2、選中則判斷
if(checked !== -1){
let prefix = data.value.substring(0, 8); // '002-101-' 截取父節(jié)點的ID
let list = checkedKeys.filter( item => {
// 根據(jù)父節(jié)點的ID判斷，這個節(jié)點下有多少個子節(jié)點; item.length < 8: 刪除所有的父節(jié)點
return item.indexOf(prefix) !== -1 || item.length < 8;
});
console.log(list); // ['002-101-301']
// 如果一個父節(jié)點下選中多個子節(jié)點，刪除子節(jié)點并重新賦值。
if(list.length !== 1){ //
list.forEach(item => {
let index = checkedKeys.indexOf(item);
checkedKeys.splice(index, 1);
});
checkedKeys.push(data.value)
}
// 結果
console.log(checkedKeys); // ['002-101-301']
// 重復賦值
this.$refs.tree.setCheckedKeys(checkedKeys);
}
},
**情況二：**單選切換
// 處理選擇數(shù)據(jù)
changeTree(data, list){
// {value: '002-101-302', label: '硬座'}
console.log(data);
// {checkedKeys: ['002', '002-101', '002-101-301','002-101-302']}
console.log(list);
// 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
let checkedKeys = list.checkedKeys;
// ['002', '002-101', '002-101-301','002-101-302']
console.log(checkedKeys)
let checked = checkedKeys.indexOf(data.value);
console.log(checked); // 3 ps: 返回-1時，表示數(shù)組不存在某個元素
// 2、選中則判斷
if(checked !== -1){
let prefix = data.value.substring(0, 8); // '002-101-' 截取父節(jié)點的ID
let list = checkedKeys.filter( item => {
// 根據(jù)父節(jié)點的ID判斷，這個節(jié)點下有多少個子節(jié)點; item.length < 8: 刪除所有的父節(jié)點
return item.indexOf(prefix) !== -1 || item.length < 8;
});
// ['002', '002-101', '002-101-301','002-101-302']
console.log(list);
// 如果一個父節(jié)點下選中多個子節(jié)點，刪除子節(jié)點并重新賦值。
if(list.length !== 1){
// 由于當前為選中操作，所以需要先刪除當前節(jié)點下所有選中的子節(jié)點。
list.forEach(item => {
let index = checkedKeys.indexOf(item);
checkedKeys.splice(index, 1);
});
// 此時處理完后，checkedKeys：[]
// 添加本地選中的數(shù)據(jù)
// ['002-101-302']
checkedKeys.push(data.value)
}
// 結果 ['002-101-302']
console.log(checkedKeys);
// 重復賦值
this.$refs.tree.setCheckedKeys(checkedKeys);
}
},
情況三： 點擊取消
// 處理選擇數(shù)據(jù)
changeTree(data, list){
console.log(data); // {value: '002-101-302', label: '硬座'}
console.log(list); // {checkedKeys: []}
// 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
let checkedKeys = list.checkedKeys;
console.log(checkedKeys) // []
let checked = checkedKeys.indexOf(data.value); // data.value : 002-101-301
console.log(checked); // -1 ps: 返回-1時，表示數(shù)組不存在某個元素,此時直接結束方法
// 2、選中則判斷
if(checked !== -1){
let prefix = data.value.substring(0, 8); // '002-101-' 截取父節(jié)點的ID
let list = checkedKeys.filter( item => {
// 根據(jù)父節(jié)點的ID判斷，這個節(jié)點下有多少個子節(jié)點; item.length < 8: 刪除所有的父節(jié)點
return item.indexOf(prefix) !== -1 || item.length < 8;
});
console.log(list); // ['002-101-301']
// 如果一個父節(jié)點下選中多個子節(jié)點，刪除子節(jié)點并重新賦值。
if(list.length !== 1){ //
list.forEach(item => {
let index = checkedKeys.indexOf(item);
checkedKeys.splice(index, 1);
});
checkedKeys.push(data.value)
}
// 結果
console.log(checkedKeys);
// 重復賦值
this.$refs.tree.setCheckedKeys(checkedKeys);
}
},
情況四： 分別選中上半年和下半年各選一個
// 處理選擇數(shù)據(jù)
// 打印結果在上圖，可以對照著看。
changeTree(data, list){
console.log(data);
console.log(list);
// 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
let checkedKeys = list.checkedKeys;
console.log(checkedKeys) // []
let checked = checkedKeys.indexOf(data.value);
console.log(checked); // -1 ps: 返回-1時，表示數(shù)組不存在某個元素,此時直接結束方法
// 2、選中則判斷
if(checked !== -1){
let prefix = data.value.substring(0, 8);
let list = checkedKeys.filter( item => {
// 根據(jù)父節(jié)點的ID判斷，這個節(jié)點下有多少個子節(jié)點; item.length < 8: 刪除所有的父節(jié)點
return item.indexOf(prefix) !== -1 || item.length < 8;
});
console.log(list);
// 如果一個父節(jié)點下選中多個子節(jié)點，刪除子節(jié)點并重新賦值。
if(list.length !== 1){ //
list.forEach(item => {
let index = checkedKeys.indexOf(item);
checkedKeys.splice(index, 1);
});
checkedKeys.push(data.value)
}
// 結果
console.log(checkedKeys);
// 重復賦值
this.$refs.tree.setCheckedKeys(checkedKeys);
}
},
至此簡單的多葉子節(jié)點實現(xiàn)單元就完成了。
完整源碼
<template>
<div class="home">
<el-row :gutter="60" style="background-color: wheat">
<el-col :span="8"></el-col>
<el-col :span="8">
<div style="margin: 30px;">
<el-tree
:data="data"
show-checkbox
default-expand-all
node-key="value"
ref="tree"
empty-text="no data"
:check-on-click-node="true"
highlight-current
@check="changeTree"
:props="defaultProps">
</el-tree>
<div class="buttons" style="margin-top: 30px;">
<el-button @click="getCheckedNodes">通過 node 獲取</el-button>
<el-button @click="getCheckedKeys">通過 key 獲取</el-button>
<el-button @click="setCheckedNodes">通過 node 設置</el-button>
<br>
<el-button @click="setCheckedKeys">通過 key 設置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
data: [{
value: '001',
label: '上半年度出行',
selectable: 'false',
children: [{
value: '001-101',
label: '火車',
selectable: 'false',
children: [{
value: '001-101-301',
label: '硬座'
}, {
value: '001-101-302',
label: '軟臥'
}]
}]
},{
value: '002',
label: '下半年出行',
selectable: 'false',
children: [{
value: '002-101',
label: '火車',
selectable: 'false',
children: [{
value: '002-101-301',
label: '硬座'
}, {
value: '002-101-302',
label: '軟臥'
}]
}]
}],
// 設置每個節(jié)點的屬性
defaultProps: {
children: 'children',
label: 'label',
id: 'value',
disabled: 'selectable'
}
};
},
mounted() {
},
methods: {
// 處理選擇數(shù)據(jù)
changeTree(data, list){
// 1、判斷是選中/取消選中操作 checked: -1表示取消選中，否則為選中
let checkedKeys = list.checkedKeys;
console.log(checkedKeys)
let checked = checkedKeys.indexOf(data.id);
// 2、選中則判斷
if(checked !== -1){
let prefix = data.id.substring(0, 8);
let list = checkedKeys.filter( item => {
return item.indexOf(prefix) !== -1 || item.length < 8;
});
console.log(list);
// 如果一個父節(jié)點下選中多個子節(jié)點，刪除子節(jié)點并重新賦值。
if(list.length !== 1){
list.forEach(item => {
let index = checkedKeys.indexOf(item);
checkedKeys.splice(index, 1);
});
checkedKeys.push(data.id)
}
// 結果
console.log(checkedKeys);
this.$refs.tree.setCheckedKeys(checkedKeys);
}
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
console.log(this.$refs.tree.getCheckedNodes()[0].id);
console.log(this.$refs.tree.getCheckedNodes()[0].label);
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: '二級 2-1'
}, {
id: 9,
label: '三級 1-1-1'
}]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
}
</script>
<style scoped>
</style>
到此這篇關于el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼的文章就介紹到這了,更多相關el-tree 葉子節(jié)點單選內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue項目記錄鎖定和解鎖功能實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue獲取DOM的幾種方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
前后端分離進行項目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關于vue中前端代理跨域問題的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
本文主要介紹了vue項目兼容ie11的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內容講解的很清晰，有對于這方面感興趣的同學可以研究下2021-02-02
最近一直在做的項目是Vue2搭建的項目，本文主要介紹了Vue全局自定義指令Modal拖拽的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導航和路由容器（router-link、router-view），通過配置children可實現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue loadmore 組件滑動加載更多源碼解析,需要的朋友可以參考下2017-07-07