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
| <template>
| <div class="product-tree-container" style="height: 100%">
| <el-input
| placeholder="输入单位名称进行过滤"
| style="width: 80%"
| v-model="filterText"
| size="small"
| clearable
| ></el-input>
| <el-divider></el-divider>
| <el-tree
| style="height: 100%;overflow: auto"
| class="filter-tree"
| :data="companys"
| :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: 'ZtCompanyTree',
| props: {},
|
| data() {
| return {
| filterText: '',
| companys: [],
| defaultProps: {
| children: 'children',
| label: 'name'
| }
| }
| },
| watch: {
| filterText(val) {
| this.$refs.tree.filter(val)
| }
| },
| mounted() {
| this.getCompanyList()
| },
| methods: {
| async getCompanyList() {
| let res = await this.$http.get('/sys/company/tree')
| this.companys = 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>
|
|
