elementUI实现下拉选择树

最新推荐文章于 2024-09-02 15:49:23 发布

MistyWood

最新推荐文章于 2024-09-02 15:49:23 发布

阅读量3.9k

点赞数 2

分类专栏： vue+ElementUI学习文章标签： vue elementUI js

本文链接：https://blog.csdn.net/mistywood/article/details/105433118

版权

vue+ElementUI学习专栏收录该内容

7 篇文章 2 订阅

订阅专栏

1、用select+tree实现
效果：
在这里插入图片描述
关键代码：

heml部分：
	<el-select v-model="selectObj.name" placeholder="请选择"  style="width: 300px" ref="selectReport">
      <el-option :value="selectObj.id" :label="selectObj.name" style="width: 300px;height:200px;overflow: auto;background-color:#fff">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-option>
    </el-select>
    
    js部分：
 /**
       * @description    树点击事件
       * @author  mistywood
       * @Datetime  2020/4/4 11:20
       */
      handleNodeClick:function(node){
        if(node.children){

        }else{
          this.selectObj.id = node.label
          this.selectObj.name = node.label
          this.$refs.selectReport.blur()
        }
      }

2、用popover，tree，input实现
效果：
在这里插入图片描述
关键代码：

html部分：
   <el-popover
      placement="bottom-start"
      v-model="treeFlag"
      class="orgTree"
      width="300"
      trigger="click">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        :expand-on-click-node="false"
        node-key="id"
        style="width: 300px;"
        default-expand-all
        @node-click="handleNodeClickDep"
      ></el-tree>
      <el-input
        slot="reference"
        ref="input"
        v-model="name"
        clearable
        :readonly="true"
        style="width: 300px"
        suffix-icon="el-icon-arrow-down"
        placeholder="请选择"
      >
      </el-input>
    </el-popover>

js部分：
      /**
       * @description    下拉树点击事件
       * @author  mistywood
       * @Datetime  2020/4/3 11:20
       */
      handleNodeClickDep(val) {
        this.name = val.label;
        this.treeFlag = false;
      },
   
</script>