Element el-checkbox-group v-model不支持对象(object)解决方案

 更新时间:2023年05月23日 08:53:08   作者:ZionHH  
本文主要介绍了Element el-checkbox-group v-model不支持对象(object)解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

这个问题在官方 Issues 看到不少相关问题 [Feature Request] checkbox-group value bound object array
但是官方没有计划支持

方法一 (推荐)

label 还是绑定官方限定的类型,在选中后使用 computed 实现

<template>
  <div id="app">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  components: {
  },
  data () {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广州' },
        { id: 4, name: '深圳' },
        { id: 5, name: '杭州' }
      ],
      isIndeterminate: true
    }
  },
  computed: {
    // 选中的对象数组
    checkedObj () {
      return this.cities.filter(
          option => this.checkedCities.some(
              checked => checked === option.id
          )
      )
    }
  },
  watch: {
    checkedObj: {
      handler (val) {
        console.log(val)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities.map(item => item.id) : []
      this.isIndeterminate = false
    },
    // 选择
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }
}
</script>

方法二

https://www.jb51.net/javascript/285193umm.htm(原博客地址)

注意: 在你的项目中修改无效!

1、把 element 源码克隆到本地

git clone https://github.com/ElemeFE/element.git

或者下 zip 包 https://github.com/ElemeFE/element

2、npm install

3、找到目录(packages\checkbox\src)中的 checkbox-button.vuecheckbox.vue 文件

将图中红框中的代码替换为以下代码

return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1

npm run dist,将生成的 lib 文件夹替换你的项目里 node-module 的 element-ui 文件夹中的 lib 文件夹

这样就可以直接绑定 object 了

到此这篇关于Element el-checkbox-group v-model不支持对象(object)解决方案的文章就介绍到这了,更多相关el-checkbox-group v-model object内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vuex页面刷新后数据丢失的方法

    vuex页面刷新后数据丢失的方法

    这篇文章主要介绍了vuex页面刷新后数据丢失的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue 大文件分片上传(断点续传、并发上传、秒传)

    vue 大文件分片上传(断点续传、并发上传、秒传)

    本文主要介绍了vue 大文件分片上传,主要包括断点续传、并发上传、秒传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 解决vue3+vite配置unplugin-vue-component找不到Vant组件

    解决vue3+vite配置unplugin-vue-component找不到Vant组件

    这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue中对组件二开解决思路以及方案

    Vue中对组件二开解决思路以及方案

    这篇文章主要介绍了Vue中对组件二开解决思路以及方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04
  • vue watch报错:Error in callback for watcher "xxx":"TypeError的解决方法

    vue watch报错:Error in callback for watcher "xxx&qu

    这篇文章主要给大家介绍了关于vue watch报错:Error in callback for watcher “xxx“:“TypeError:Cannot read properties of undefined的解决方法,需要的朋友可以参考下
    2023-03-03
  • vsCode中vue文件无法提示html标签的操作方法

    vsCode中vue文件无法提示html标签的操作方法

    在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下
    2023-03-03
  • 构建大型 Vue.js 项目的10条建议(小结)

    构建大型 Vue.js 项目的10条建议(小结)

    这篇文章主要介绍了构建大型 Vue.js 项目的10条建议(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Element树形控件el-tree实现一键全选、反选功能

    Element树形控件el-tree实现一键全选、反选功能

    最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下
    2023-10-10
  • vue中配置Eslint的步骤代码解析

    vue中配置Eslint的步骤代码解析

    本文介绍Vue项目中配置ESLint和Prettier的步骤,包括安装依赖、创建配置文件、设置package.json脚本、格式化配置及运行检查,实现代码规范,感兴趣的朋友一起看看吧
    2025-07-07
  • vue+element树形选择器组件封装和使用方式

    vue+element树形选择器组件封装和使用方式

    这篇文章主要介绍了vue+element树形选择器组件封装和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2020-04-04

最新评论