elselect, eloption, eltree make the tree drop-down box

1, FIG effect: 

2, the introduction means, configure attributes

 <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, definition data, the configuration here is the property tree assembly props

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

4, the data transfer properties of the component assembly from the parent over, but can not be modified directly computed using the following process

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

5, the tree data

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

6, when selecting the current node, elselect component displays the selected node information

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

 

Published 11 original articles · won praise 0 · Views 468

Guess you like

Origin blog.csdn.net/qq_40608283/article/details/104667797