el-tree-select tree selection data echo

icon

question

Due to the use of lazy loading, unlike loading all the data at once, there is currently only ID, and the tree structure has not been rendered, which will result in no label echo. So we need to construct the tree nodes we want when the component is just rendered.

main code

<el-form-item prop="positionName">
     <div class="label">意向职位</div>
      <el-tree-select
          ref="tree"
          v-model="form4.positionNo"
          clearable
          placeholder="请选择意向职位"
          :data="positionTypeData"
          node-key="id"
          :default-expanded-keys="[form4.positionNo]"
          :default-checked-keys="[form4.positionNo]"
          :props="{ label: 'displayName', children: 'children' }"
          :suffix-icon="CaretBottom"/>
  </el-form-item>

Notice

node-key="id"And :default-expanded-keys="[form4.positionNo]"(the key array of the nodes expanded by default) and :default-checked-keys="[form4.positionNo]"(the key array of the nodes checked by default) are very important. el-tree-selectThey are the combination of the two components of el-tree and el-select. Their functions are the same, followed by We must pay attention to whether the data type returned to us by the backend positionTypeDatais the same as the id in the array. If one is Numbera type and the other is Stringa type, the echo will fail.

achieve effect