多选多的一种通用处理逻辑

开发的时候,我们经常会涉及元素的多选多,并且还需要对选中的元素进行拖动排序

通用的设计方案如下

游戏资源集合与游戏资源的绑定关系处理(多选多的一种通用处理逻辑)
可能的情况:
1.之前被选中的资源,现在取消了选中,对应的就是删除关联关系的场景;
2.之前没有被选中的资源,现在被选中了,对应的就是新增关联关系的场景。

实现设计
1.页面,需要返回所有的英语游戏资源,并且判断在这个游戏集合下,哪些已经被选中了,哪些没有被选中
字段:{游戏资源的id:1,name:游戏名1,游戏是否被选中了:选中或者没有选中的结果返回}
然后前端根据这些进行加载和渲染,如果取消勾选,就把选中改为未选中;如果新勾选,就把未选中改为选中(不管用户做多少次勾选和去勾选,都是一样的逻辑,只关注最后列表项中哪些是被选择的,哪些是未被选中的)

2.接口提交的后台处理
2.1先将返回页面的数据再数据库中重新查询出来
2.2根据id一个个的对比新旧的是否选中的值的对比,一样的就是不变;新值是选中的,就新增关联关系;新值是未选中的,就是删除关联

3.如果需要排序序号的话(选中元素,需要在某个地方,按指定的顺序来排序),如何处理的问题(最好是前端能够拖动顺序,然后提交的时候,按元素顺序加载即可,被选中的元素在数组中的顺序,就是他们新的顺序,有的可能还是被选中的状态,但是他的序号变了,这种也要判断一下序号是否相等,不相等的,也做序号更新逻辑)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-cascader组件可以通过设置checkStrictly属性来实现父子节点不关联,从而实现勾选子节点时不对应父节点的需求。对于多选城市的情况,可以通过以下步骤来处理: 1. 在el-cascader组件中设置checkStrictly属性为true,表示父子节点不关联。 2. 在数据源中为每个节点添加一个isChecked属性,用于记录节点是否被选中。 3. 在change事件中,遍历所有节点,如果当前节点被选中,则将其所有父节点的isChecked属性设置为true;如果当前节点被取消选中,则将其所有子孙节点的isChecked属性设置为false。 4. 在提交表单时,遍历所有节点,将isChecked属性为true的节点的值添加到表单中。 代码示例: ```html <el-cascader v-model="selectedCities" :options="cityOptions" :props="props" :check-strictly="true" @change="handleCityChange" ></el-cascader> ``` ```javascript data() { return { cityOptions: [ { value: 'Beijing', label: '北京', children: [ { value: 'Dongcheng', label: '东城区', children: [ { value: 'Dongzhimen', label: '东直门', isChecked: false }, { value: 'Wangfujing', label: '王府井', isChecked: false } ] }, { value: 'Haidian', label: '海淀区', children: [ { value: 'Zhongguancun', label: '中关村', isChecked: false }, { value: 'Wudaokou', label: '五道口', isChecked: false } ] } ] }, { value: 'Shanghai', label: '上海', children: [ { value: 'Pudong', label: '浦东新区', children: [ { value: 'Lujiazui', label: '陆家嘴', isChecked: false }, { value: 'Zhangjiang', label: '张江', isChecked: false } ] }, { value: 'Xuhui', label: '徐汇区', children: [ { value: 'Xujiahui', label: '徐家汇', isChecked: false }, { value: 'Caohejing', label: '漕河泾', isChecked: false } ] } ] } ], selectedCities: [], props: { value: 'value', label: 'label', children: 'children', isChecked: 'isChecked' } } }, methods: { handleCityChange(value, selectedOptions) { // 遍历所有节点,更新isChecked属性 this.cityOptions.forEach(option => { this.updateNodeChecked(option, value, selectedOptions) }) }, updateNodeChecked(node, value, selectedOptions) { if (selectedOptions.length === 0) { // 如果没有选中的节点,则将所有节点的isChecked属性设置为false node.isChecked = false } else if (selectedOptions.indexOf(node) !== -1) { // 如果当前节点被选中,则将其所有父节点的isChecked属性设置为true node.isChecked = true let parentNode = node.parent while (parentNode) { parentNode.isChecked = true parentNode = parentNode.parent } } else { // 如果当前节点未被选中,则将其所有子孙节点的isChecked属性设置为false node.isChecked = false if (node.children) { node.children.forEach(child => { this.updateNodeChecked(child, value, selectedOptions) }) } } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值