网站 › 『编程语言讨论求助区』 › 前端vue 全选-----反选-----单选

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

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

如何实现表格列表中的-----全选-----反选-----单选功能
表格中数据可能多个   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或者清空

查看完整版本: 前端vue 全选-----反选-----单选