el-tree树结构排序后不更新问题

需求:在树结构之中, 添加排序功能, 可以点击按钮对节点进行上下的排序;在进行排序的时候, 若当前节点已经选中, 排序之后还是需要保持选中状态

问题:在进行排序的时候,点击按钮对当前节点进行排序, 但是选中状态没有保持;

解决过程:在开始查看的时候, 已经在排序方法changeSort完成后调用了handlecheckchange这个方法, 但是在执行中, 发现这个发法调用了两次,并且我希望执行的这个handlecheckchange被后一个handlecheckchange覆盖了,所以选中没有效果。排查了很久,也不知道为什么会这样,最后应该是我对数据进行改变的时候改变了节点里的什么地方,或者是我的数据没有响应, 才产生这样的问题把,但是应该也不会让这个方法执行两次。 不过也希望有大佬可以说一下。

最后解决方法:既然你执行两次, 而且我在changeSort方法中执行的handlecheckchange被覆盖了, 那就让changeSort方法中的handlecheckchange最后执行, 加上$nextTick, 就可以了。

 这样排序后, 之前如果是选中状态, 排序之后也是选中状态。解决。

el-treeel-table都是饿了么UI库ElementUI的组件,它们可以一起使用来实现复杂的数据可视化和交互。 具体实现方法如下: 1. 在页面中引入ElementUI库和Vue.js库。 2. 在template中定义el-treeel-table组件,并将它们绑定到不同的数据源上。 3. 在script中定义数据源和方法,用于将el-treeel-table绑定到同一个数据源上。 4. 在方法中实现数据的筛选、排序和分页等功能,并将处理后的数据绑定到el-table组件上。 5. 在el-tree组件中添加事件监听器,用于响应用户的操作并更新el-table组件的数据。 下面是一个简单的示例代码: ``` <template> <div> <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree> <el-table :data="tableData" :columns="columns"></el-table> </div> </template> <script> export default { data() { return { treeData: [ { label: 'Category 1', children: [ { label: 'Subcategory 1-1', id: 1 }, { label: 'Subcategory 1-2', id: 2 }, ], }, { label: 'Category 2', children: [ { label: 'Subcategory 2-1', id: 3 }, { label: 'Subcategory 2-2', id: 4 }, ], }, ], tableData: [], columns: [ { prop: 'name', label: 'Name' }, { prop: 'price', label: 'Price' }, ], }; }, methods: { handleNodeClick(data) { this.tableData = this.filterData(data.id); }, filterData(id) { // 根据id筛选数据 return this.data.filter((item) => item.categoryId === id); }, }, }; </script> ``` 在这个示例中,我们将el-tree组件绑定到treeData数据源上,并在el-table组件中显示tableData数据源中的数据。在handleNodeClick方法中,我们根据节点的id筛选数据,并将处理后的数据绑定到el-table组件上。所以当用户点击树形结构中的一个节点时,el-table组件会显示与该节点相关的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值