1 <template>
2 <!-- 需求:通过点击<el-input> 将<el-tree>树型结构打开，选中<el-tree>某个值显示在<el-input>里面(中文)，点击搜索将<el-input>的值传给后台，后台需要中文对应的id;前端显示中文，后台传入Number -->
3 <div class="demo">
4 <el-input placeholder="前端显示中文" v-model="demoString" value-key=demoNumber @click.native="getTree"></el-input>
5 <el-tree :data="data" :props="defaultProps" node-key=id @node-click="handleNodeClick" v-show="closeTree" default-expand-all></el-tree>
6 </div>
7 </template>
8 <script>
9 export default {
10 name: 'demo',
11 data() {
12 return {
13 demoString: '',
14 closeTree: false,
15 data: [{
16 id: 1,
17 label: '一级 1',
18 children: [{
19 id: 2,
20 label: '二级 1-1',
21 children: [{
22 id: 3,
23 label: '三级 1-1-1'
24 }]
25 }]
26 }, {
27 id: 4,
28 label: '一级 2',
29 children: [{
30 id: 5,
31 label: '二级 2-1',
32 children: [{
33 id: 6,
34 label: '三级 2-1-1'
35 }]
36 }, {
37 id: 7,
38 label: '二级 2-2',
39 children: [{
40 id: 8,
41 label: '三级 2-2-1'
42 }]
43 }]
44 }, {
45 id: 9,
46 label: '一级 3',
47 children: [{
48 id: 10,
49 label: '二级 3-1',
50 children: [{
51 id: 11,
52 label: '三级 3-1-1'
53 }]
54 }, {
55 id: 12,
56 label: '二级 3-2',
57 children: [{
58 id: 13,
59 label: '三级 3-2-1'
60 }]
61 }]
62 }],
63 defaultProps: {
64 children: 'children',
65 label: 'label'
66 }
67 }
68 },
69 created() {
70
71 },
72 methods: {
73 // 点击 树状里面当前那个
74 handleNodeClick(data) {
75 this.demoString = data.label; // 前端显示中文
76 this.demoNumber = data.id; // 传后台值为对应 id
77 this.closeTree = !this.closeTree;
78 },
79 // 点击 input 打开 树状，
80 getTree() {
81 this.closeTree = !this.closeTree;
82 },
83 },
84 };
85
86 </script>
87 <style scoped>
88
89 </style>
