首页 > 其他分享 >vue的element,el-select与el-tree配合使用,实现下拉树状

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

时间:2023-02-27 10:47:34浏览次数:46  
标签:el vue 树状 tree id treeValue label children

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>

  

data数据
options: [
        {
          id: "1",
          label: "测试",
          children: [
            {
              id: "2",
              label: "测试一",
            },
            {
              id: "3",
              label: "测试二",
            },
            {
              id: "4",
              label: "测试三",
            },
          ],
        },
      ],
      treeSelectText: "",
      treeValue: {},
      defaultProps: {
        children: "children",
        label: "label",
      },

  

树状节点点击事件
 nodeClick(item) {
      const { id, label } = item;
      this.treeValue.id = id;
      this.treeValue.label = label;
      this.treeSelectText = label;
      this.$refs.stlectTree.blur();
    },

  效果

 

标签:el,vue,树状,tree,id,treeValue,label,children
From: https://www.cnblogs.com/wcq520/p/17158822.html

相关文章

  • Vue 关键概念介绍
    Vue现在已经迭代到3+版本,阅读官方文档的过程中发现作者的一些理念和思路很合我口味,很多概念与方案都是基于解决实际问题提出并实现的,且在权衡利弊后勇于打破常规,比如如何......
  • vue3 门户网站搭建4-mockjs
    在后端接口没做好之前,为了更好的模拟接口返回,引入mockjs。它可以拦截ajax请求,生成伪数据。 1、安装:npmimokjs-D、npmi vite-plugin-mock-D2、在vite.confi......
  • Intellij IDEA 创建Maven项目
    1.选择创建Maven项目2.勾选Createfromarchetype为使用模板,如图为使用maven下的webapp模板 1.Mavehomedirectory:Maven的目录2.Usersettingsfile:Maven根目录/con......
  • vue环境变量配置 解决process.env取值undefind的问题?
    1.前端配置文件中,配置的参数取值为undefind如何解决,图片如下。  ·   2。需要到package.json中改变配置,加上--modedevelopment......
  • 题解:【ABC291F】Teleporter and Closed off
    题目链接给定一个\(n\)个点的图,每个点只向编号最多大于它\(m\)的点连单向边,求不经过\(2\simn\)中的一个点,\(1\ton\)的最短路。注意到\(m\)很小,这里给出两种......
  • vue3 + vite4 + vue-router4动态路由存在的问题
    使用vite4、vue3、vue-router4搭建动态路由的时候遇到的问题及解决方法解决!!我使用的是登录接口返回菜单,使用pinia存储菜单数据,使用pinia-plugin-persist加js-cookie进行......
  • 说说Vue响应式系统中的Watcher和Dep的关系-面试进阶
    引言在这里我先提出两个问题(文章末尾会进行解答):在Vue的数据响应系统中,Dep和Watcher各自分担什么任务?Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗?有......
  • 前端一面常见vue面试题汇总
    说说你对proxy的理解,Proxy相比于defineProperty的优势Object.defineProperty()的问题主要有三个:不能监听数组的变化:无法监控到数组下标的变化,导致通过数组下标添......
  • 能不能手写Vue响应式?前端面试进阶
    Vue视图更新原理Vue的视图更新原理主要涉及的是响应式相关APIObject.defineProperty的使用,它的作用是为对象的某个属性对外提供get、set方法,从而实现外部对该属性的......
  • 阿里前端常考vue面试题汇总
    Vuex中actions和mutations有什么区别题目分析mutations和actions是vuex带来的两个独特的概念。新手程序员容易混淆,所以面试官喜欢问。我们只需记住修改状态只能是mutat......