小魚(yú)兒心語(yǔ)： 人生是要慢慢的成熟的燃观。我們不要去急于求成，那是要一步一步地去解決問(wèn)題浇揩。因?yàn)橐亲常遣攀巧畹囊饬x之所在–面對(duì)困難、然后就耐心地去學(xué)習(xí)胳徽、適應(yīng)并解決難題积锅。所有這些經(jīng)歷最終塑造了現(xiàn)在的你。
在寫(xiě)這個(gè)小功能的時(shí)候养盗，發(fā)現(xiàn)關(guān)于它的屬性缚陷、方法介紹在element-plus中很少，于是我想把當(dāng)時(shí)找到的一篇文章分享給你們往核，同時(shí)也做一個(gè)記錄箫爷，便于日后的代碼開(kāi)發(fā)。
需在main.js注冊(cè)組件：
import ElTreeSelect from 'el-tree-select';
vue.use(ElTreeSelect);
內(nèi)部直接使用 : <el-tree-select v-model="id"/>
API：
el-select 取消參數(shù):
multiple 改為內(nèi)置聂儒，通過(guò)v-model類型判斷是否多選
:filterable="false" 搜索從彈出框里面執(zhí)行
:filterable="false" 搜索從彈出框里面執(zhí)行
el-tree 取消參數(shù)：
:show-checkbox="selectParams.multiple" 使用下拉框參數(shù)multiple 判斷是否對(duì)樹(shù)進(jìn)行多項(xiàng) 取消對(duì)el-tree的人為傳參show-checkbox
:node-key="propsValue" 自動(dòng)獲取treeParams.props.value
:draggable="false" 屏蔽拖動(dòng)
el-select 參數(shù)：
selectParams : 支持el-select 相關(guān)參數(shù)
#### styles參數(shù)：
styles 對(duì)el-select設(shè)置style,類型:Object
#### selectClass參數(shù)：
selectClass 對(duì)el-select設(shè)置class,類型:String
el-tree 參數(shù)：
treeParams : 支持el-tree 相關(guān)參數(shù)
增加：'clickParent'
treeParams.clickParent 類型：Boolean 默認(rèn)：false
在selectParams.multiple=false單選情況下點(diǎn)擊節(jié)點(diǎn)虎锚，判斷是否關(guān)閉彈出框
clickParent: true 允許點(diǎn)擊父級(jí)關(guān)閉彈出框 false 只能點(diǎn)擊子級(jí)關(guān)閉彈出框
popover 參數(shù)：
popperClass 對(duì)應(yīng)：popper-class,類型:String
搜索框參數(shù)：
treeParams.filterable Boolean 考慮是顯示在彈出框內(nèi)的，因此放到treeParams參數(shù)內(nèi)
事件:
select-clear
select-clear 下拉框清空事件 this.$emit('select-clear');
removeTag
removeTag 移除單個(gè)標(biāo)簽衩婚，返回所有勾選的ids窜护，以及當(dāng)前移除的tag（可能為中文）標(biāo)簽 this.$emit('removeTag',ids,tag);
node-click
樹(shù)點(diǎn)擊,和el-tree參數(shù)一致: this.$emit('node-click', data, node, vm);
check
勾選觸發(fā),和el-tree參數(shù)一致: this.$emit('check',data, node, vm);
treeDataUpdateFun
treeDataUpdateFun 樹(shù)更新數(shù)據(jù)
this.post(url,postobj,response=>{
this.$refs.treeSelect.treeDataUpdateFun(response.data);
});
searchFun 參數(shù): keywords
searchFun(value){
// 如果是本地過(guò)濾：
this.$refs.treeSelect.$refs.tree.filter(value);
// 可以直接訪問(wèn)方法，也可以拿到 $refs.tree
this.$refs.treeSelect.filterFun(val);
// 如果是請(qǐng)求后臺(tái)：
this.post(url,postobj:{
keywords:value
},response=>{
this.$refs.treeSelect.treeDataUpdateFun(response.data);
});
}
filterFun 參數(shù): 本地過(guò)濾樹(shù)
this.$refs.treeSelect.filterFun(val);
DEMO （供參考）
<template>
<div id="app">
<el-tree-select :styles="styles" v-model="values" :selectParams="selectParams" :treeParams="treeParams" :treeRenderFun="_renderFun" @searchFun="_searchFun" @node-click="_nodeClickFun" ref="treeSelect"/>
<el-select multiple v-model="test" placeholder="請(qǐng)選擇" @change="_selectChange">
<el-option v-for="item in treeParams.data" :key="item.testId" :label="item.name" :value="item.testId"></el-option>
</el-select>
</div>
</template>
<style>
#app {
display: flex;
justify-content: space-between;
width: 600px;
}
</style>
<script>
export default {
name: 'App',
data() {
return {
styles: {
width: '300px'
},
test: '',
values: ['11111'],
selectParams: {
multiple: true,
clearable: true,
placeholder: '請(qǐng)輸入內(nèi)容'
},
treeParams: {
clickParent: false,
filterable: true,
'check-strictly': true,
'default-expand-all': true,
'expand-on-click-node': false,
data: [],
props: {
children: 'child',
label: 'name',
disabled: 'disabled',
value: 'testId'
}
}
};
},
mounted() {
let data = [
{
testId: '1',
name: '節(jié)點(diǎn)1',
disabled: true,
child: [
{
testId: '11111',
name: '子節(jié)點(diǎn)'
}
]
},
{
testId: '2',
name: '節(jié)點(diǎn)2',
child: [
{
testId: '222222',
disabled: true,
name: '子節(jié)點(diǎn)'
}
]
},
{
testId: '3',
name: '節(jié)點(diǎn)3'
},
{
testId: '4',
name: '節(jié)點(diǎn)4'
},
{
testId: '5',
name: '節(jié)點(diǎn)5'
},
{
testId: '6',
name: '節(jié)點(diǎn)6'
}
];
this.treeParams.data = data;
this.$refs.treeSelect.treeDataUpdateFun(data);
},
methods: {
// 下拉框修改
_selectChange(val) {
console.log(val, '<-select change');
},
// 樹(shù)點(diǎn)擊
_nodeClickFun(data, node, vm) {
console.log('this _nodeClickFun', this.values, data, node);
},
// 樹(shù)過(guò)濾
_searchFun(value) {
console.log(value, '<--_searchFun');
// 自行判斷 是走后臺(tái)查詢非春，還是前端過(guò)濾
// this.$refs.treeSelect.$refs.tree.filter(value);
this.$refs.treeSelect.filterFun(value);
// 后臺(tái)查詢
// this.$refs.treeSelect.treeDataUpdateFun(treeData);
},
// 自定義render
_renderFun(h, { node, data, store }) {
return (
<span class='custom-tree-node'>
<span>{node.label}</span>
</span>
);
}
},
components: { }
};
</script>
