左侧树形结构,右侧表格多选,表格多选回显问题

本文探讨了在前端开发中如何实现数据回显和编辑功能,特别是在树形结构与表格结合的场景下。关键步骤包括使用一个大集合存储勾选数据,表格勾选时保存值,切换树分组时回显,以及初始化后端返回数据以避免遗漏。作者提出个人实现思路,并期待更多专业建议。
摘要由CSDN通过智能技术生成

场景复原
场景描述

注意点

1、回显的数据,必须要有对应的唯一值。

实现思路

主要是回显的时候,问题提交大。
首先,需要一个大的集合{};来存储勾选的数据。

例如:{树形唯一值id:[表格勾选的数据01,表格勾选的数据01....]}

其次,表格☑️勾选的时候,需要把值存起来,如上结构。
然后,切换左侧树分组的时候,需要将集合中的数据,取出来,在表格中,做对应的回显。
最后,将数据回填在input框内时,循环处理集合即可。
在做编辑的时候,先初始化后端返回来的数据,放到集合中。这样就不会存在遗漏。

只是个人的思路,相信大神有更好的思路。请多多指教。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以通过设置表格数据的 `selected` 属性来实现多选数据的回显。假设后端返回的数据中包含一个 `selectedIds` 数组,表示已选中的数据的 ID,可以先遍历表格数据,将每条数据的 `selected` 属性设置为 `selectedIds` 数组中是否包含该条数据的 ID,然后在表格上添加一个 `@selection-change` 事件监听器,当用户手动勾选或取消勾选表格中的数据时,将新的选中数据的 ID 存入 `selectedIds` 数组中。 以下是一个示例代码,假设表格数据包含 `id` 和 `name` 两个字段: ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange" :select-on-indeterminate="false" :default-sort="{prop: 'id', order: 'ascending'}" :row-key="row => row.id" v-loading="loading"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" sortable></el-table-column> <el-table-column prop="name" label="Name" sortable></el-table-column> </el-table> </template> <script> export default { data() { return { loading: false, tableData: [] } }, methods: { async fetchData() { this.loading = true; const response = await fetch('/api/data'); const data = await response.json(); this.tableData = data.map(item => ({ ...item, selected: false })); const selectedIds = data.filter(item => item.selected).map(item => item.id); this.tableData.forEach(item => { item.selected = selectedIds.includes(item.id); }); this.loading = false; }, handleSelectionChange(selection) { const selectedIds = selection.map(item => item.id); this.tableData.forEach(item => { item.selected = selectedIds.includes(item.id); }); } }, mounted() { this.fetchData(); } } </script> ``` 在上面的示例代码中,`fetchData` 方法通过 AJAX 请求获取后端数据,并将每条数据的 `selected` 属性初始化为 `false`。然后遍历后端返回的数据,将已选中的数据的 `selected` 属性设置为 `true`。在表格上添加了一个 `selection-change` 事件监听器,当用户手动勾选或取消勾选表格中的数据时,将选中的数据的 ID 存入 `selectedIds` 数组中,并遍历表格数据,将新的选中数据的 ID 存入 `selectedIds` 数组中。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值