html
<zc-tree v-model="addFormData.empData"
:isExpand="true"
:isFilter="true"
:searchName="'name'"
:nodeKey="nodeKey"
:Selecteds="addFormData.empData"
ref="treeData"
:options="empTreeData"
:props="propsData"></zc-tree>
js
import ZcTree from '../../../components/ZcTree'
data
empTreeData: [],
nodeKey: 'id',
propsData: {
children: 'children',
label: 'name',
id: 'id'
},
empObj: {}
js
getEmpTree () {
let url = '/patient/bedNameTree'
let data = {
deptId: this.getSelectDeptInfo() || ''
}
AxiosApi(url, {}, 'GET', data).then(res => {
this.empTreeData = res.data || []
this.getChild(this.empTreeData)
// console.log(this.empTreeData)
})
},
// 查找子集
getChild (data) {
data.forEach((item) => {
if (item.children && item.children.length > 0) {
this.getChild(item.children)
} else {
this.empObj[item.id] = { ...item }
}
})
},
js
let empData = this.$refs.treeData.TreeData
test
[
{
"children": [
{
"name": "马继顺(患者)",
"id": "patient-16"
}
],
"name": "05",
"id": 0
},
{
"children": [
{
"name": "邹桂英(患者)",
"id": "patient-15"
},
{
"name": "顾娟(家属)",
"id": "family-37474"
},
{
"name": "林秀兰(家属)",
"id": "family-37476"
}
],
"name": "06",
"id": 1
}
]
ZcTree.vue
<template>
<div>
<template v-if="isFilter">
<div class="acms-filter">
<el-row>
<el-col :span="12">
<el-input
placeholder="请输入"
:clearable="false"
suffix-icon="el-icon-search"
v-model="filterText">
</el-input>
<br>
<span style="color: red;">搜索时间较长,请耐心等待</span>
</el-col>
<el-col :span="12">
<template v-if="!filterText">
<el-button @click="selectAll" class="select-all">全选</el-button>
<el-button @click="deSelectAll" class="de-select-all">全不选</el-button>
</template>
</el-col>
</el-row>
</div>
</template>
<el-tree
:data="data"
:props="props"
:check-strictly="checkStrictly"
ref="tree"
:node-key="nodeKey"
@check="getCheckedKeys"
show-checkbox
:default-expand-all="isExpand"
:filter-node-method="filterNode"
:default-checked-keys="Selecteds">
</el-tree>
</div>
</template>
<script>
export default {
props: {
isExpand: {
type: Boolean,
default () {
return false
}
},
isFilter: {
type: Boolean,
default () {
return false
}
},
searchName: {
type: String,
default () {
return 'deptName'
}
},
nodeKey: {
type: String,
default () {
return []
}
},
Selecteds: {
type: Array,
default () {
return []
}
},
options: {
type: Array,
default () {
return []
}
},
// 树节点配置选项
props: {
type: Object,
default () {
return []
}
}
},
data () {
return {
TreeData: [],
AllData: [],
flag: false,
checkStrictly: false,
filterText: ''
}
},
watch: {
Selecteds () {
this.TreeData = this.Selecteds
},
filterText (val) {
this.$refs.tree.filter(val)
}
},
computed: {
data () {
return this.options
}
},
methods: {
orgCheckChange (data, checked, indeterminate) {
},
filterNode1 (value, data) {
if (!value) {
return true
}
return data[this.searchName].indexOf(value) !== -1
},
// 触发页面显示配置的筛选
filterNode (value, data, node) {
// 如果什么都没填就直接返回
if (!value) return true
// 如果传入的value和data中的label相同说明是匹配到了
if (data[this.searchName].indexOf(value) !== -1) {
return true
}
// 否则要去判断它是不是选中节点的子节点
return this.checkBelongToChooseNode(value, data, node)
},
// 判断传入的节点是不是选中节点的子节点
checkBelongToChooseNode (value, data, node) {
// console.log(value)
// console.log(data)
// console.log(node)
// let level = 2
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回
if (parentData.data[this.searchName].indexOf(value) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
},
/* 获取当前树的ID值 */
getCheckedKeys (node, keys) {
this.flag = true
let checkedKeys = keys.checkedKeys
let halfChecked = keys.halfCheckedKeys
let checkArr = checkedKeys.concat(halfChecked)
this.TreeData = checkedKeys
this.AllData = checkArr
},
// 循环孩子
selectChildren (arr) {
for (let i = 0; i < arr.length; i++) {
this.TreeData.push(arr[i][this.nodeKey])
if (arr[i].children && arr[i].children.length > 0) {
this.selectChildren(arr[i].children)
}
}
},
// 全选
selectAll () {
this.TreeData = []
for (let i = 0; i < this.data.length; i++) {
this.TreeData.push(this.data[i][this.nodeKey])
if (this.data[i].children && this.data[i].children.length > 0) {
this.selectChildren(this.data[i].children)
}
}
this.flag = true
this.$refs.tree.setCheckedNodes(this.data)
this.$forceUpdate()
},
// 取消全选
deSelectAll () {
this.flag = true
this.TreeData = []
this.$refs.tree.setCheckedKeys([])
this.$forceUpdate()
}
}
}
</script>
<style lang="scss">
.acms-filter {
width: 100%;
text-align: left;
margin: 0 0 10px 10px;
.el-input--small {
width: 260px;
margin-left: auto;
margin-right: auto;
}
.select-all {
background: #1e87f0;
color: #ffffff;
border-color: #1e87f0;
margin: 0 0 10px 10px;
}
.de-select-all {
margin: 0 0 10px 10px;
}
}
</style>