![](https://i-blog.csdnimg.cn/blog_migrate/643cf3fd9df9a9fef4fcb31445f712f5.png)
<el-input v-model="filterText" placeholder="" style="width: 48%"/>
<el-button type="primary" @click="handleSearch" class="ml-2">查找</el-button>
<el-radio-group v-model="form.choice" @change="handleCheckAll">
<el-radio label="all" class="ml-2">全选</el-radio>
<el-radio label="invert">反选</el-radio>
</el-radio-group>
<el-tree
ref="treeRef"
class="filter-tree"
:data="treeData"
:props="defaultProps"
show-checkbox
node-key="id"
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<div style="display: flex;">
<span style="margin-right: 8px">{{ node.label }}</span>
<span>
<!-- <a @click="append(data)"> Append </a>-->
<!-- <el-link @click="remove(node, data)"><el-icon><Delete /></el-icon></el-link>-->
</span>
<!-- <IconifyIconOffline :icon="Del" class="relink-btn-icon" />-->
</div>
</template>
</el-tree>
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
interface Tree {
id: number
label: string
children?: Tree[]
checked?: boolean;
}
const defaultProps = {
children: "children",
label: "label"
};
const filterNode = (value: string, treeData: Tree) => {
if (!value) return true;
return treeData.label.includes(value);
};
const handleSearch = () => {
treeRef.value!.filter(filterText.value);
}
const getAllNodeKeys = (nodes: Tree[], keys: number[] = []) => {
nodes.forEach((node) => {
keys.push(node.id);
if (node.children) {
getAllNodeKeys(node.children, keys);
}
});
return keys;
};
const handleCheckAll = (value: string) => {
if (value === 'all') {
// for (let i = 0; i < treeData.value.length; i++) {
// if (treeRef.value.getNode(treeData.value[i]).disabled == false) {
// treeRef.value.setChecked(treeData.value[i].id, true, true);
//}
//}
const allKeys = getAllNodeKeys(treeData.value);
treeRef.value!.setCheckedKeys(allKeys, false)
} else {
//treeRef.value.setCheckedKeys([])
const allKeys = getAllNodeKeys(treeData.value);// 获取所有节点的 key
const checkedKeys = treeRef.value?.getCheckedKeys() || [];// 获取当前选中的节点
const newCheckedKeys = allKeys.filter((key) => !checkedKeys.includes(key)); // 新的选中节点为未选中的节点
treeRef.value!.setCheckedKeys(newCheckedKeys)
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/02ea254c93e15628c33331d179a9b2f9.png)
<template>
<div class="main">
<!-- 添加树-->
<div style="width: 100%;margin: 10px">
<AddLink @click="handleBtnClick" style="margin-right: 10px" />
<div v-if="showInput">
<el-input v-model="content" style="width: 30%" />
<el-button @click="handleClick">确定</el-button>
</div>
<el-input v-model="filterText" placeholder="Filter keyword" style="width: 50%" />
<el-tree
ref="treeRef"
class="filter-tree"
:data="treeData"
:props="defaultProps"
show-checkbox
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<div style="display: flex;">
<span style="margin-right: 8px">{{ node.label }}</span>
<span>
<!-- <a @click="append(data)"> Append </a>-->
<!-- <el-link @click="remove(node, data)"><el-icon><Delete /></el-icon></el-link>-->
</span>
<!-- <IconifyIconOffline :icon="Del" class="relink-btn-icon" />-->
</div>
</template>
</el-tree>
</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { reactive, ref, onMounted, computed, watch, nextTick } from "vue";
import { ElTree } from "element-plus";
import Del from "@iconify-icons/mdi/delete-forever-outline";
import { Delete } from '@element-plus/icons-vue'
defineOptions({
name: "tree"
});
interface Tree {
id: number
label: string
children?: Tree[]
}
const defaultProps = {
children: "children",
label: "label"
};
const filterText = ref("");
const content = ref("");
const showInput = ref(false);
const treeRef = ref<InstanceType<typeof ElTree>>();
const filterNode = (value: string, treeData: Tree) => {
if (!value) return true;
return treeData.label.includes(value);
};
const treeData= ref(
[
{
id: 1,
label: "维护文档",
children: [
{
id: 4,
label: "拓扑图"
},
{
id: 5,
label: "端口表"
},
{
id: 6,
label: "配置信息"
}
]
},
{
id: 2,
label: "制度规范"
},
{
id: 3,
label: "工程资料",
children: [
{
id: 7,
label: "xxx工程资料1"
},
{
id: 8,
label: "xxx工程资料2"
}
]
}
]
)
const handleBtnClick = () => {
showInput.value = true;
};
const handleClick = () => {
if (content.value) {
treeData.value.push({
label: content.value,
});
content.value = ''; // 清空输入框
}
// const newChild ={ id: 12, lable: content.value, children: [] };
// treeData.push(newChild)
// treeData.value = [...treeData.value]
// console.log( content.value, "-------------content.value------");
// console.log(treeData.value,'---treeData--');
}
onMounted(async () => {
});
watch(filterText, (val) => {
treeRef.value!.filter(val);
});
watch(treeData, (val) => {
if(val){
console.log(treeData,'---treeData--');
}
});
</script>
<style lang="scss" scoped>
@import "@/style/component.scss";
</style>