1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <template>
| <div class="product-tree-container " :style="'height:' + tree_Hei +'px'">
| <el-input
| placeholder="输入名称进行过滤"
| style="width: 80%"
| v-model="filterText"
| size="small"
| clearable
| ></el-input>
| <el-divider></el-divider>
| <el-tree
| style="height: 90%;overflow: auto"
| class="filter-tree"
| :data="depts"
| :props="defaultProps"
| default-expand-all
| :expand-on-click-node="false"
| :highlight-current="true"
| @node-click="handleNodeClick"
| :filter-node-method="filterNode"
| ref="tree"
| ></el-tree>
| </div>
| </template>
| <script>
| export default {
| name: 'ZtDeptTree',
| props: {},
|
| data() {
| return {
| filterText: '',
| depts: [],
| tree_Hei:document.documentElement.clientHeight -200,
| defaultProps: {
| children: 'children',
| label: 'name'
| }
| }
| },
| watch: {
| filterText(val) {
| this.$refs.tree.filter(val)
| }
| },
| mounted() {
| this.getDeptList()
| },
| methods: {
| async getDeptList() {
| let res = await this.$http.get('/sys/dept/tree')
| this.depts = res.data
| return res
| },
| filterNode(value, data) {
| if (!value) return true
| return data.name.indexOf(value) !== -1
| },
| handleNodeClick(data) {
| this.$emit('on-selected', data)
| }
| }
| }
| </script>
|
|
