First look at the renderings:

 <! -- HTML code block -->
      <el-form-item label="Superior authority :" prop="region" size="small">
        <el-select v-model="ruleForm.region" placeholder="" ref="selectUpResId">
          <el-input placeholder="Enter organisation Name keyword" v-model="filterText">
          </el-input>
          <el-option
            hidden
            :key="ruleForm.region"
            :value="ruleForm.upResId"
            :label="ruleForm.region"
            style="height: auto">
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClick">
            </el-tree>
          </el-option>
        </el-select>
      </el-form-item>
Copy the code

Related parameters:

Please refer to the official website according to your needs:The element of the UI’s official website

// Bind the data section
 data: [{resId: 1.name: "Level 1".children: [{resId: 11.name: "The secondary 1-1".children: [{name: "Triple the 1-1-1",},],},],}, {resId: 2.name: "Level 2".children: [{resId: 22.name: "Secondary 2-1".children: [{resId: 221.name: "Triple the 2-1-1",},],}, {resId: 23.name: "Secondary 2-2".children: [{resId: 224.name: "Triple the 2-2-1",},],},],},defaultProps: {
        children: "children".label: "name",},filterText: "".// Text filtering
        ruleForm: { 
        region: "".// Parent organization name
        upResId: "".// Id of the parent organization
        }

Copy the code

Watch method:



// Tree menu filter
 watch: {
    filterText(val) {
        console.log(val)
      this.$refs.tree.filter(val); }},Copy the code

Methods the methods:

 // Tree structure the function executed after the check
    handleNodeClick(data) {
      console.log(data.name);
      // Assign a value to select
      this.ruleForm.region = data.name;
      this.ruleForm.upResId = data.resId;
       // After the selector is executed, it loses the effect of the focus hiding drop-down box
      this.$refs.selectUpResId.blur();
    },
     // Tree menu filter
    filterNode(value, data) {
      if(! value)return true;
      returndata.name.indexOf(value) ! = = -1;
    },
Copy the code