elselect,eloption,eltree制作树形下拉框

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;
    }
发布了11 篇原创文章 · 获赞 0 · 访问量 468

猜你喜欢

转载自blog.csdn.net/qq_40608283/article/details/104667797