前端vue 全选-----反选-----单选

y88502 · 发表于 2022-10-13 18:15

如何实现表格列表中的-----全选-----反选-----单选功能
表格中数据可能多个 vue2.6+el

zhjabc · 发表于 2022-10-13 18:15

本帖最后由 zhjabc 于 2022-10-19 11:48 编辑

数据格式改一下：[{name:a,check:true},{name:b,check:false}]
给全选v-model=isAll
computed: {
isAll: {
   set (val) {
      select.forEach(obj => (obj.check = val))  全选变化的时候，单选跟着变化
   },
   get () {
      return select.every(obj => (obj.check === true)) 判断单选是否每个都选中选中则全选
   }
}
  }

y88502 · 发表于 2022-10-13 18:24

本帖最后由 y88502 于 2022-10-13 18:36 编辑

补一张图
目前的格式是这样的：[{ orderId: '112314', username: '张三', a: true, b: false, c: false, d: true }]

有啥思路实现，或者数据更换格式的解决方法
非常感谢

Takitooru · 发表于 2022-10-14 00:08

Vue实现单选、全选和反选
https://www.jianshu.com/p/d72e3c3c7861

unmask · 发表于 2022-10-14 22:06

同一组checkbox组件都绑定同一个model，比如：v-model="selectedAList"，单选/反选能自动完成，剩下的就是全选了，在全选的checkbox上change事件里，根据状态，对selectedAList进行全量push或者清空

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 前端vue 全选-----反选-----单选

最佳答案