el-select,el-option,el-tree制作树形下拉框

1、效果如图: 

2、引入组件,配置相关属性

 <el-select
      v-model="mineStatus"  //这里显示下拉选择时对应的节点信息
      placeholder="请选择"
      clearable             //可以清除当前信息
       >
    <el-option :value="treedata1" >  //下拉数据
        <el-tree
          :data="treedata1"    //树形结构数据来源,从后端接口传过来的数据
           accordion           //每次只打开一个数的节点
           node-key="updateform.ID_K"
           ref="updatetree"
            highlight-current     //当前选择高亮显示
           :props="defaultProps"
            @check-change="handleCheckChange"   //选择不同节点时会触发
            check-on-click-node            //点击节点即选中节点
              >
        </el-tree>
    </el-option>
</el-select>

3、定义数据,这里是配置树形组件的props属性

data() {
    return {
      defaultProps: {
        children: "children",
        label: "text"
      },
      mineStatus: "",
    };
  },

4、属性组件的数据从父组件传过来,但是不能直接修改,下面使用了computed处理

 props: {
    ["treedata"]: Array,
}
   

5、树形数据

 computed: {
   treedata1() {
      return this.treedata;
    }
  }

6 、选择当前节点时,elselect组件显示所选节点信息

 handleCheckChange() {
      let res = this.$refs.tree.getCurrentNode();
      this.mineStatus = [res][0].text;
    }

 

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值