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

1、效果如图: 

el-select,el-option,el-tree制作树形下拉框_第1张图片

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

 
      //下拉数据
        
        
    

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;
    }

 

你可能感兴趣的:(VUE)