需求:项目经理要求实现一个类似QQ成员系统管理的组件来进行成员系统权限的添加,可多选可查询,本来想用elementui树图组件,但是elementui树图搜索父节点却没展示子节点,于是在之前改过elementui组件一波三折后直接自己上手写了个组件,本组件树还是引用了elementui的树图组件,因此请在vue项目中添加入element-ui,本组件可嵌入模态弹框中
github地址:https://github.com/applebring/dir-elementui-tree
本组件实现后界面(可在dirtree.vue中根据需要更改组件及样式)
模糊匹配如下
该组件属性及方法如下:
引入方式:
下载github上面的文件,找到src下plugin下的dirtree.vue文件,将其作为组件导出并引入,如下
import dirTree from "../plugin/dirtree.vue";
(main.vue)
<template>
<div>
<div class="title">自定义基于elementui的树图组件</div>
<div class="tree-container">
<dir-tree :dataarr="data" :defaultchecked='defaultChecked' :defaultsel="defaultsel" @tree-submit="submitData" :visibledismiss="false"></dir-tree>
</div>
<el-button type="primary" @click="openModal">通过模态框打开</el-button>
<el-dialog title="树图组件" :visible.sync="outerVisible">
<dir-tree :dataarr="data2" :defaultchecked='defaultChecked2' :defaultsel="defaultsel2" @tree-submit="submitData2" @close-modal="closeModal" :visibledismiss="true"></dir-tree>
</el-dialog>
</div>
</template>
<script>
import dirTree from "../plugin/dirtree.vue";
//必备属性:dataarr(加载树图的数据) defaultchecked(树图加载默认选中项)
export default {
data() {
return {
data: [
{
id: 1,
label: "一级 1",
searchtext: "一级1",
children: [
{
id: 4,
label: "二级 1-1",
searchtext: "一级1二级1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
searchtext: "一级1二级1-1三级1-1-1"
},
{
id: 10,
label: "三级 1-1-2",
searchtext: "一级1二级1-1三级1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
searchtext: "一级2",
children: [
{
id: 5,
label: "二级 2-1",
searchtext: "一级2二级2-1"
},
{
id: 6,
label: "二级 2-2",
searchtext: "一级2二级2-2"
}
]
},
{
id: 3,
label: "一级 3",
searchtext: "一级3",
children: [
{
id: 7,
label: "二级 3-1",
searchtext: "一级3二级3-1"
},
{
id: 8,
label: "二级 3-2",
searchtext: "一级3二级3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
defaultChecked: [7, 8], //选中项节点id
defaultsel: [
{
id: 7,
label: "二级 3-1",
searchtext: "一级3二级3-1"
},
{
id: 8,
label: "二级 3-2",
searchtext: "一级3二级3-2"
}
], //右边框选中选项
outerVisible: false,
data2: [
{
id: 1,
label: "一级 1",
searchtext: "一级1",
children: [
{
id: 4,
label: "二级 1-1",
searchtext: "一级1二级1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
searchtext: "一级1二级1-1三级1-1-1"
},
{
id: 10,
label: "三级 1-1-2",
searchtext: "一级1二级1-1三级1-1-2"
}
]
}
]
}
],
defaultChecked2: [9], //选中项节点id
defaultsel2:[
{
id: 9,
label: "三级 1-1-1",
searchtext: "一级1二级1-1三级1-1-1"
}
]
};
},
components: { dirTree },
methods: {
submitData(data) {//提交按钮方法,在此将数据提交到服务器
//参数data返回选中的子节点对象数组([{},{}])
console.log("data", data);
//服务器数据处理
},
openModal() {//引入模态框打开模态框
this.outerVisible = true;
},
closeModal(){
this.outerVisible = false;
}
}
};
</script>
<style scoped>
.title {
padding: 50px 0;
text-align: center;
background: #88d8f6;
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #6babfb),
color-stop(1, #88d8f6)
);
background: -ms-linear-gradient(right, #6babfb, #88d8f6);
background: -o-linear-gradient(#88d8f6, #6babfb);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#88D8F6",
endColorstr="#6BABFB",
GradientType=0
);
background: linear-gradient(to right, #6babfb, #88d8f6);
box-shadow: none;
color: #fff;
font-size: 36px;
}
.tree-container {
border: 1px solid #ddd;
padding: 30px 100px;
background-color: #e7e8e8;
}
.sub-title {
font-size: 16px;
font-weight: bolder;
}
</style>