J'ai récemment créé un système de gestion d'arrière-plan, en utilisant le composant el-tree d'ElementUi, et avec un effet de sélection. Lors de la modification des données, les données sélectionnées d'origine doivent être rendues dans l'arborescence, les données et vérifiées par défaut - Les données des clés sont toutes les données obtenues à partir de l'arrière-plan, donc lorsque l'opération de modification est effectuée, l'effet sélectionné n'est pas reflété comme prévu. Plus tard, j'ai découvert qu'avant de rendre l'arbre el, je devais obtenir la valeur par défaut check-keys, sinon l'état sélectionné par défaut ne sera pas rendu;
<el-tree
v-if="isShowTree"
:data="zTree"
:props="defaultProps"
:default-checked-keys="defaultTree"
node-key="cDptCde"
ref="tree"
show-checkbox
@check-change="handledeptNodeClick"
class="div-border box-card">
</el-tree>
J'ai donc utilisé un état isShowTree. Lorsque j'ai obtenu les détails des données et les clés vérifiées par défaut, j'ai défini isShowTree = true. Si vous utilisez l'attribut props, vous devez attendre que les données soient obtenues. Rendre el-tree , c'est-à-dire que vous ne pouvez définir isShowTree que lorsque vous obtenez des données de données et des données de clés vérifiées par défaut en même temps. Vous pouvez alors parfaitement rendre l'arborescence avec l'effet sélectionné. S'il y a un problème qui ne peut pas être résolu , vous pouvez l'essayer. test! utilisation
computed: {
/*从后台获取递归数据*/
zTree() {
return this.$store.getters.zTree.tree
},
/*是否展示机构数*/
isShowTree(){
// this.zTree.length --->如果leng>0,代表已获取到data的数据
// this.isGetDetail--->如果isGetDetail为true,则说明已经获取到default-checked-keys的数据
return this.zTree.length&&this.isGetDetail
}