Resuelva los eventos seleccionados por defecto en la estructura de árbol de ElementUi (la solución perfecta)

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
            }

Supongo que te gusta

Origin blog.csdn.net/weixin_43169949/article/details/104966499
Recomendado
Clasificación