Element-Select选择器结合树形控件

2022-05-13 15:03:21 阅读：189 来源： 互联网

标签：控件 label 三级选择器 Element data children Select

Element UI中Select选择器的下拉选项是普通的列表，但是有些情况下，需要提供下拉菜单，这时就需要结合Select选择器和树形控件Tree了，其代码如下

<template>
  <div class="about">
<!--  选择器选项以树形控件展示  -->
      <el-select v-model="form.id" placeholder="请选择" ref="selectTree">
          <el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
          <el-tree :data="data"
                   :props="defaultProps"
                   node-key="id"
                   accordion
                   highlight-current
                   @node-click="handleNodeClick"/>
      </el-select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        id: '',
        value: ''
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      // console.log(data)
      this.form = {
        id: data.label,
        value: data.label
      }
      // 使 input 失去焦点，并隐藏下拉框
      this.$refs.selectTree.blur()
    }
  }
}
</script>

最终效果如下所示：

小结：

需要提供一个隐藏的option标签：<el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
当点击节点后，需要调用Select选择器的blur方法隐藏下拉框：this.$refs.selectTree.blur()

标签：控件,label,三级,选择器,Element,data,children,Select
来源： https://www.cnblogs.com/itmacy/p/16266705.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Element-Select选择器结合树形控件