Element el-checkbox-group v-model不支持對象(object)解決方案
這個(gè)問題在官方 Issues 看到不少相關(guān)問題 [Feature Request] checkbox-group value bound object array
但是官方?jīng)]有計(jì)劃支持
方法一 (推薦)

label 還是綁定官方限定的類型,在選中后使用 computed 實(shí)現(xiàn)

<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: {
// 選中的對象數(shù)組
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>方法二
http://www.dbjr.com.cn/javascript/285193umm.htm(原博客地址)
注意: 在你的項(xiàng)目中修改無效!
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.vue 和 checkbox.vue 文件

將圖中紅框中的代碼替換為以下代碼
return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1
npm run dist,將生成的 lib 文件夾替換你的項(xiàng)目里 node-module 的 element-ui 文件夾中的 lib 文件夾
這樣就可以直接綁定 object 了
到此這篇關(guān)于Element el-checkbox-group v-model不支持對象(object)解決方案的文章就介紹到這了,更多相關(guān)el-checkbox-group v-model object內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中 router.beforeEach() 的用法示例代碼
導(dǎo)航守衛(wèi)主要是通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧2023-12-12
vue攔截器實(shí)現(xiàn)統(tǒng)一token,并兼容IE9驗(yàn)證功能
這篇文章主要介紹了vue攔截器實(shí)現(xiàn)統(tǒng)一token,并兼容IE9驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼
本篇文章主要介紹了vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue3使用video-player實(shí)現(xiàn)視頻播放
video-player是一個(gè)基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實(shí)現(xiàn)視頻播放,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01

