<template>
|
<el-card shadow="never" class="card" style="max-height:90vh;overflow:auto">
|
<el-row :gutter="10">
|
<el-col :span="22">
|
<el-input placeholder="输入关键字进行过滤" size="small" style="margin-bottom:10px;" v-model="filterText"></el-input>
|
</el-col>
|
<el-col :span="2">
|
<el-tooltip class="item" effect="dark" :content="expand ? '收起' : '展开'" placement="top">
|
<i style="margin-top:8px; font-size:20px; cursor:pointer" @click="toggleRowExpansion" :class="expand ? 'el-icon-top' : 'el-icon-bottom'"></i>
|
</el-tooltip>
|
</el-col>
|
</el-row>
|
<el-tree :props="defaultProps" :data="treelist" :default-expand-all="expand" :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree"></el-tree>
|
</el-card>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
treelist:{
|
type:Array,
|
},
|
fieldname:{
|
type:String
|
}
|
},
|
data() {
|
return {
|
filterText: '',
|
expand:true,
|
defaultProps: {
|
children: 'children',
|
label: 'key'
|
}
|
};
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
}
|
},
|
methods: {
|
filterNode(value, data) {
|
return data.key.indexOf(value) !== -1;
|
},
|
handleNodeClick(data){
|
this.$emit('update:search_data', {[this.fieldname]:data.val})
|
this.$emit('refesh_list')
|
},
|
toggleRowExpansion(){
|
this.expand = !this.expand
|
this.changeTreeNodeStatus(this.$refs.tree.store.root)
|
},
|
changeTreeNodeStatus (node) {
|
node.expanded = this.expand
|
for (let i = 0; i < node.childNodes.length; i++) {
|
node.childNodes[i].expanded = this.expand
|
if (node.childNodes[i].childNodes.length > 0) {
|
this.changeTreeNodeStatus(node.childNodes[i])
|
}
|
}
|
}
|
},
|
};
|
</script>
|
