Recientemente hice un sistema de gestión en segundo plano, usando el componente el-tree de ElementUi, y con un efecto de selección. Al modificar los datos, los datos originales seleccionados deben ser procesados en la estructura del árbol, los datos y la verificación predeterminada: los datos de las claves son todos los datos obtenidos del fondo, por lo que cuando se realiza la operación de modificación, el efecto seleccionado no se refleja como se esperaba. Más tarde, descubrí que antes de renderizar el árbol-el, tenía que obtener el predeterminado- Los datos seleccionados de teclas marcadas, de lo contrario, el estado seleccionado predeterminado no se mostrará;
<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>
Entonces, usé un estado isShowTree. Cuando obtuve los detalles de los datos y obtuve las claves marcadas por defecto, configuré isShowTree = true. Si usa el atributo props, debe esperar hasta que se obtengan los datos. Render el-tree , es decir, puede establecer isShowTree solo cuando obtiene datos de datos && datos de claves marcadas por defecto al mismo tiempo. Entonces puede representar perfectamente la estructura de árbol con el efecto seleccionado. Si hay un problema que no se puede resolver , puedes probarlo. ¡prueba! utilizar
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
}