解决ElementUi树结构默认选中的事件

解决ElementUi树结构默认选中的事件

解决ElementUi树结构默认选中的事件

一个后台管理系统,使用了ElementUi的el-tree组件,并且带有选中效果的,当对数据进行修改操作时,需要将原有的选中数据渲染到树结构中,data以及default-checked-keys的数据都是从后台获取的数据,所以在进行修改操作时,并没有按照预期的能把选中的效果体现出来,后来一想才发现,原来渲染el-tree前,就得拿到default-checked-keys的选中数据,否则默认选中状态就不会得到渲染;

 <el-tree
    v-if="isShowTree"
    :data="zTree"
    :props="defaultProps"
    :default-checked-keys="defaultTree"
    node-key="cDptCde"
    ref="tree"
    show-checkbox
    @check-change="handledeptNodeClick">
</el-tree>

于是,我使用了一个isShowTree的状态,当获取到数据详情时,并且拿到default-checked-keys后,设置isShowTree=true,如果有使用到props时属性时,一定要等获取到data数据时再渲染el-tree,也就是说要同时拿到data数据&&default-checked-keys数据时才能设置isShowTree便可完美的渲染出带选中效果的树形结构,如果有遇到这个问题解决不了的,可以试一试!

 /*从后台获取递归数据*/
if (haveData.value.length >= 0 && tableData.value.length >= 0) {
        isShowTree.value = true;
      }
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要组装ElementUI树结构,我们需要在Vue的组件中使用ElementUITree组件。首先,在Vue组件中导入TreeTreeNode组件: ``` import { Tree, TreeNode } from 'element-ui' ``` 然后,在组件的template中使用Tree组件来组装树结构,可以设置树的数据源和各个节点的显示内容: ``` <template> <div> <el-tree :data="treeData"> <el-tree-node :label="node.label" :key="node.id" v-for="node in treeData" :children="node.children"> </el-tree-node> </el-tree> </div> </template> ``` 其中,`:data`属性绑定了树的数据源,而`:label`属性绑定了节点的显示内容。通过`:key`属性来唯一标识每个节点,`v-for`指令可以用来遍历树的数据源,`:children`属性可以用来指定子节点的数据源。 为了实现组装树结构的功能,我们还需要在Vue组件的script中定义树的数据源。可以将树的数据定义为一个对象数组,每个对象包括`label`、`id`和`children`等属性,用来描述节点的显示内容、唯一标识和子节点: ``` <script> export default { data() { return { treeData: [ { id: 1, label: '节点1', children: [ { id: 11, label: '子节点1-1', children: [ { id: 111, label: '孙子节点1-1-1' }, { id: 112, label: '孙子节点1-1-2' } ] }, { id: 12, label: '子节点1-2' } ] }, { id: 2, label: '节点2', children: [ { id: 21, label: '子节点2-1' }, { id: 22, label: '子节点2-2' } ] } ] } } } </script> ``` 通过定义树的数据源并将其绑定到Tree组件的`:data`属性上,就可以实现ElementUI树结构的组装。注意,根节点的数据源绑定在Tree组件上,而子节点的数据源则通过TreeNode组件的`:children`属性绑定。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值