完整页面代码
<template>
<div style="width:100%;">
<div class="company"></div>
<div style="position:relative">
<el-input @keyup.enter.native="submit" placeholder="请输入关键词" v-model="filterText"></el-input>
<div class="search-icon">
<img width="100%" height="100%" @click="search" src="@/assets/img/搜索.png" alt />
</div>
</div>
<!-- default-expand-all设置默认全部展开设置缩进 -->
<el-tree
class="filter-tree"
:props="defaultProps"
accordion
:load="loadNode"
:data="treedata"
lazy
:indent="0"
:check-on-click-node="true"
@check="setSelectedNode"
:filter-node-method="filterNode"
ref="tree"
>
<!-- <span class="slot-t-node" slot-scope="{node,data}">
<i :class="{'fa fa-folder':!node.expanded,'fa fa-folder-open':node.expanded,'fa fa-file':node.isLeaf}" style="color:#333" />
<span style="color:red;font-weight:600" v-show="data.existFD==0&&node.isLeaf">{{node.label}}</span>
<span v-show="data.existFD!=0">{{node.label}} </span>
</span>-->
</el-tree>
<!-- <div class="buttons">
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>-->
</div>
</template>
<script>
import { path } from "../../router/path";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { searchPvtree, SEARCH } from "../../axios/dataCheck";
export default {
props: {},
data() {
return {
isthis: 0, //标识判断是哪种树
//tab页面导航路由
router: [],
filterText: "",
treedata: [],
oid: "", //中转oid,真正的oid存于模块a中
label: "",
node: "",
resolve: "",
checktype: "",
documentid: "", //中转documentid,真正的存于模块a中
historyid: "", //中转historyDocumentid,真正的存于模块a中
defaultProps: {
children: "children",
label: "LABEL"
// label: 'label'
}
};
},
beforeCreate() {},
created() {
// path[0].children[0].children[1].children.forEach(item=>{
// //设置左侧导航对应的路由
// this.router.push({path:path[0].path+'/'+path[0].children[0].path+'/'+path[0].children[0].children[1].path+'/'+item.path})
// }),
// path[0].children[0].children[1].children[2].children.forEach(item1=>{
// this.router.push({path:path[0].path+'/'+path[0].children[0].path+'/'+path[0].children[0].children[1].path+'/'+path[0].children[0].children[1].children[2].path+'/'+item1.path})
// })
},
mounted() {
// searchPvtree().then(res=>{
// console.log(res.data.data)
// this.data=res.data.data
// console.log(this.data)
// })
//每次tree组件渲染清空参数。
this.setDkxoid("");
this.setLabel("");
this.setchecktype("");
},
computed: {},
watch: {
gettreeData(val) {}
//设置输入框输入时自动过滤,无需点击搜索按钮
// filterText(val) {
// this.$refs.tree.filter(val);
// }
},
methods: {
...mapActions("a", ["setDkxoid", "setLabel", "setchecktype"]),
//查询树通用方法,通过isthis标识符判断哪种调用
commonSearch() {
if (!this.filterText) {
this.isthis = 0;
this.treedata = [];
searchPvtree({ level: "0" })
.then(res => {
console.log(res.data.success);
if (res.data.success) {
this.treedata = res.data.data;
} else {
this.$message.error(res.data.msg);
}
})
.catch(() => {
let data = [];
return resolve(data);
});
} else {
this.isthis = 1;
this.treedata = [];
SEARCH({ searchName: this.filterText }).then(res => {
console.log(res);
this.treedata = res.data.data;
});
}
},
//查询
search() {
this.commonSearch();
},
//enter
submit() {
this.commonSearch();
},
commonSearchT(val, resolve) {
// 查找顶级对象
searchPvtree(val)
.then(res => {
if (res.data.success) {
return resolve(res.data.data);
} else {
this.$message.error(res.data.msg);
}
})
.catch(() => {
console.log("错误");
let data = [];
return resolve(data);
});
},
// 加载树结点
loadNode(node, resolve) {
// isthis为0则调取全searchPvtree
if (this.isthis == 0) {
// 如果是顶级的父节点
if (node.level === 0) {
let paraobj = { level: "0" };
this.commonSearchT(paraobj, resolve);
} else {
if (node.data.PARENTID) {
let paraobj = {
oid: node.data.OID.toString(),
level: node.level.toString(),
parentId: node.data.PARENTID
};
this.commonSearchT(paraobj, resolve);
}
else{
// 根据父节点id找寻下一级的所有节点
let paraobj = {
oid: node.data.OID.toString(),
level: node.level.toString()
};
this.commonSearchT(paraobj, resolve);
}
}
} else {
// isthis为1则不调取
let data = [];
return resolve(data);
}
},
//实现单选
setSelectedNode(data, obj) {
**//如果要控制单选,必须指定nodekey, //this.$refs.tree.setCheckedKeys([data]);**
console.log(data.LABEL, data);
var that = this;
//最下一级有字段ISLEAF
//加一层判断必须要有checktype才允许校验
if (data.CHECKTYPE) {
console.log(99);
this.oid = data.OID; //用于搜索部门列表
this.label = data.LABEL;
this.checktype = data.CHECKTYPE;
this.setDkxoid(this.oid); //设置修改大块线oid,只有当他不为空是才赋值发生值改变
this.setLabel(this.label);
this.setchecktype(this.checktype);
} else {
this.setchecktype("");
this.setDkxoid(""); //设置修改大块线oid,只有当他不为空是才赋值发生值改变
}
},
//树的获取设置操作
getCheckedNodes() {
// console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
// console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 8,
label: "二级 3-2"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([13]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
//数内容筛选
filterNode(value, data) {
if (!value) return true;
return data.LABEL.indexOf(value) !== -1;
}
}
};
</script>
<style lang="scss">
//设置搜索按钮
.search {
display: inline-block;
margin-left: 0.2rem;
padding: 0.03rem 0.15rem;
background: rgb(0, 112, 107);
font-size: 0.14rem;
color: white;
border-radius: 0.04rem;
cursor: pointer;
}
//设置搜索图标
.search-icon {
position: absolute;
left: 55%;
top: 0.05rem;
width: 0.12rem;
height: 0.12rem;
}
.search-icon img {
width: 0.12rem;
height: 0.12rem;
}
//设置搜索框
.main_tree .el-input {
outline: none;
width: 60%;
margin-left: 0.08rem;
.el-input__inner {
outline: none;
display: inline-block;
width: 100%;
height: 0.3rem !important;
line-height: 0.3rem !important;
font-size: 0.1rem;
text-indent: 0.01rem;
border-radius: 0.15rem;
}
}
//设置公司名称
.company {
text-indent: 0.08rem;
font-size: 0.16rem;
color: #333333;
font-weight: 800;
margin-bottom: 0.1rem;
}
//修改Tree样式
.el-tree-node {
.el-tree-node__expand-icon.is-leaf {
display: none;
}
//设置叶子节点显示checkbox,设置checkbox与文字的间距
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
margin: 0 0.05rem;
} //设置其他节点不显示checkbox
.el-checkbox .el-checkbox__inner {
display: none;
}
//设置tree文字的大小
.el-tree-node__label {
font-size: 0.14rem;
font-weight: 600;
}
}
// 设置虚线
.el-tree-node {
position: relative;
padding-left: 0.04rem !important;
margin-bottom: 0.02rem;
}
.el-tree-node__children {
padding-left: 0.35rem;
}
.el-tree-node :last-child:before {
height: 0.38rem;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before,
.el-tree-node:after {
content: "";
left: -0.22rem;
position: absolute;
right: auto;
border-width: 0.01rem;
}
.tree :first-child .el-tree-node:before {
border-left: none;
}
//--start
// //竖直的虚线
.el-tree-node:before {
border-left: 0.01rem dashed rgb(191, 191, 191);
bottom: 0.01rem;
height: 100%;
top: -0.27rem;
width: 0.01rem;
}
//水平的虚线
.el-tree-node:after {
border-top: 0.01rem dashed rgb(191, 191, 191);
height: 0.2rem;
top: 0.13rem;
width: 0.22rem;
}
//修改展开图标
.el-tree .el-icon-caret-right:before {
background: url("../../assets/img/展开.png") no-repeat 0 0.01rem;
content: "";
display: block;
width: 0.14rem;
height: 0.14rem;
font-size: 0.14rem;
background-size: 0.14rem;
}
//修改收起图标
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../assets/img/收起.png") no-repeat -0.01rem 0;
content: "";
display: block;
width: 0.14rem;
height: 0.14rem;
font-size: 0.14rem;
background-size: 0.16rem;
} //修改原本点击展开或收起图标会旋转的样式
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
//-end
.slot-t-node span {
color: #333;
font-size: 0.14rem;
font-family: "Microsoft YaHei" !important;
}
.el-tree-node__expand-icon {
color: #333 !important;
font-size: 0.21rem !important;
}
.el-tree-node__content > .el-tree-node__expand-icon {
padding: 0.06rem !important;
}
//设置对齐图标
.fa {
padding-left: 0.03rem !important;
}
</style>