" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年05月23日 08:53:08   作者:ZionHH  
本文主要介紹了Element el-checkbox-group v-model不支持對象(object)解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

這個問題在官方 Issues 看到不少相關(guān)問題 [Feature Request] checkbox-group value bound object array
但是官方?jīng)]有計劃支持

方法一 (推薦)

label 還是綁定官方限定的類型,在選中后使用 computed 實現(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(原博客地址)

注意: 在你的項目中修改無效!

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 了

到此這篇關(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() 的用法示例代碼

    vue中 router.beforeEach() 的用法示例代碼

    導(dǎo)航守衛(wèi)主要是通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧
    2023-12-12
  • vue視圖響應(yīng)式更新詳細(xì)介紹

    vue視圖響應(yīng)式更新詳細(xì)介紹

    這篇文章主要介紹了Vue響應(yīng)式原理,響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生了改變的時候,就會運(yùn)行一些函數(shù),最常見的示render函數(shù)
    2022-09-09
  • vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能

    vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能

    這篇文章主要介紹了vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-04-04
  • vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法

    vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法

    這篇文章主要介紹了vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼

    vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼

    本篇文章主要介紹了vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • 詳解vue引入子組件方法

    詳解vue引入子組件方法

    在本文中小編給大家分享的是關(guān)于vue引入子組件方法和先關(guān)注意點,有需要的朋友們可以學(xué)習(xí)下。
    2019-02-02
  • tdesign vue初始化組件源碼解析

    tdesign vue初始化組件源碼解析

    這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • Vue3使用video-player實現(xiàn)視頻播放

    Vue3使用video-player實現(xiàn)視頻播放

    video-player是一個基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實現(xiàn)視頻播放,具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • 基于vue實現(xiàn)分頁效果

    基于vue實現(xiàn)分頁效果

    這篇文章主要介紹了基于vue實現(xiàn)分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue 點擊按鈕增加一行的方法

    vue 點擊按鈕增加一行的方法

    今天小編就為大家分享一篇vue 點擊按鈕增加一行的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論