粒子，修改自cascader：
代码语言：javascript复制<html>
<head>
<!-- Import style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- Import component library -->
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>
<body>
<div id="app">
<div class="block">
<span class="demonstration">单选选择任意一级选项</span>
<el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable>
</el-cascader>
<el-tree
ref="tree"
:data="options"
show-checkbox
node-key="id"
default-expand-all
:props="{ label: 'label' }"
>
</el-tree>
</div>
</div>
<script>
var dist=[
{value:0,label:'桂林',id:0,parentId:null},
{value:1,label:'南宁',id:1,parentId:null},
{value:2,label:'尧山',id:2,parentId:0},
{value:3,label:'七星',id:2,parentId:0},
{value:4,label:'西乡塘',id:2,parentId:1},
];
const getTreeMenu=(rootList, id, list)=> {
for (let i = 0; i < rootList.length; i ) {
let item = rootList[i]
if (String(item.parentId) == String(id)) {
list.push(item);
}
}
list.map(item => {
item.children = []
getTreeMenu(rootList, item.id, item.children)
if (item.children.length == 0) {
delete item.children;
}
})
return list;
}
var arr=[];
getTreeMenu(dist,null,arr);
console.log(arr);
const App = {
data() {
const state = Vue.reactive({options: arr});
return {
...state,
};
},
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>运行结果
官方粒子：
代码语言：javascript复制https://element-plus.org/zh-CN/component/tree.html#节点过滤如下：
代码语言：javascript复制<template>
<el-input v-model="filterText" placeholder="Filter keyword" />
<el-tree
ref="tree"
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
/>
</template>
<script lang="ts">
export default {
data() {
return {
filterText: '',
data: [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 4,
label: 'Level two 1-1',
children: [
{
id: 9,
label: 'Level three 1-1-1',
},
{
id: 10,
label: 'Level three 1-1-2',
},
],
},
],
},
{
id: 2,
label: 'Level one 2',
children: [
{
id: 5,
label: 'Level two 2-1',
},
{
id: 6,
label: 'Level two 2-2',
},
],
},
{
id: 3,
label: 'Level one 3',
children: [
{
id: 7,
label: 'Level two 3-1',
},
{
id: 8,
label: 'Level two 3-2',
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
},
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
},
}
</script>element plus
1 el-cascader
2 初次使用
3 el-select
4 el-upload
