vue的element,el-select与el-tree配合使用,实现下拉树状

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
HTML
<el-select
      ref="stlectTree"
      v-model="treeSelectText"
      placeholder="请选择"
      size="small"
    >
      <el-option
        :value="treeValue.id"
        :label="treeValue.label"
        style="height: auto; padding: 0"
      >
        <el-tree
          class="ctims-treebox"
          style="font-weight: 400"
          :data="options"
          :props="defaultProps"
          default-expand-all
          node-key="codeId"
          :expand-on-click-node="false"
          highlight-current
          @node-click="nodeClick"
          ref="tree"
        />
      </el-option>
    </el-select>

  

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
data数据
options: [
        {
          id: "1",
          label: "测试",
          children: [
            {
              id: "2",
              label: "测试一",
            },
            {
              id: "3",
              label: "测试二",
            },
            {
              id: "4",
              label: "测试三",
            },
          ],
        },
      ],
      treeSelectText: "",
      treeValue: {},
      defaultProps: {
        children: "children",
        label: "label",
      },

  

1
2
3
4
5
6
7
8
树状节点点击事件
 nodeClick(item) {
      const { id, label } = item;
      this.treeValue.id = id;
      this.treeValue.label = label;
      this.treeSelectText = label;
      this.$refs.stlectTree.blur();
    },

  效果

 

posted @   blackAge  阅读(690)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示