 <p>checkList:{{ checkList }}</p>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="復(fù)選框 A"></el-checkbox>
    <el-checkbox label="復(fù)選框 B"></el-checkbox>
    <el-checkbox label="復(fù)選框 C"></el-checkbox>
  </el-checkbox-group>

如果將checkList賦值[],則選中結(jié)果為數(shù)組，若此時將checkList:賦值為字符串，則會出現(xiàn)上述問題

在這里插入圖片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet"  rel="external nofollow" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <p>checkList:{{ checkList }}</p>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="復(fù)選框 A"></el-checkbox>
    <el-checkbox label="復(fù)選框 B"></el-checkbox>
    <el-checkbox label="復(fù)選框 C"></el-checkbox>
  </el-checkbox-group>
  <p>checkListBloone:{{ checkListBloone }}</p>
  <el-checkbox-group v-model="checkListBloone">
    <el-checkbox label="1"></el-checkbox>
    <el-checkbox label="2"></el-checkbox>
    <el-checkbox label="3"></el-checkbox>
  </el-checkbox-group>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    checkList: [],
    checkListBloone:''
  }
})
</script>
</body>
</html>

element ui中el-checkbox-group點(diǎn)擊一個全部選中問題

原因是

checkbox-group中的v-modle要單獨(dú)一個數(shù)組對象，不能作為表單對象，ruleForm中的一個屬性值，提交表單時，將數(shù)組對象處理一下，賦值給ruleForm表單對象就可以了！

出現(xiàn)這個問題的原因經(jīng)過排查，是因為在其它的代碼里把ruleForm中的v-modle的數(shù)組屬性的類型轉(zhuǎn)了，當(dāng)時沒有發(fā)現(xiàn)，后來排查發(fā)現(xiàn)了，所以checkbox-group中的v-modle是可以直接使用ruleForm中的屬性，但是需要注意的是必須是數(shù)組且，不要轉(zhuǎn)換了。

如果實在是要轉(zhuǎn)換那就可以將v-modle中的數(shù)組獨(dú)立出來！

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: