el-select树状下拉框

最新推荐文章于 2024-07-09 14:08:28 发布

青沐-

最新推荐文章于 2024-07-09 14:08:28 发布

阅读量112

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48295815/article/details/131211959

版权

文章介绍了在Element-UI库中由于缺少树状下拉框组件，因此需要自定义封装的方法。通过结合el-select和el-tree组件，实现了一个带有选择功能的树形结构下拉菜单，并提供了相关的代码示例和方法，如getCheckbox函数用于处理选中节点。

摘要由CSDN通过智能技术生成

element-ui中没有树状下拉框，所以要的话需要自己封装
如下图：在这里插入图片描述
代码如下：

<el-select
                  v-model="resourceName"
                  placeholder="请选择"
                  :popper-append-to-body="false"
                  style="width: 300px"
                >
                  //value设置为空 不然会报错//
                  <el-option
                    value=""
                    style="overflow: auto; height: 100%"
                    disabled
                  >
                  //treeData 树状的数据
                    <naturalResources
                      @getChecked="getChecked"
                      :treeData="treeData"
                    />
                  </el-option>
                </el-select>

naturalResources组件

<el-tree
      ref="tree"
      :props="defaultProps"
      :data="treeData"
      show-checkbox
      node-key="rowid"
      @check="getCheckbox"
    >
    </el-tree>
    methods:{
      getCheckbox(val, num) {
        //获取选中的数据 node-key必须
      }
    }