快捷導(dǎo)航

使用el-checkbox-group選中后值為true和false遇到的坑

更新時(shí)間：2022年07月07日 11:28:07 作者：qq_25537391

這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-checkbox-group選中后值為true和false的坑

在使用el-checkbox-group設(shè)置復(fù)選框組的時(shí)候，會(huì)遇到設(shè)置的label值不顯示，點(diǎn)擊某一選項(xiàng)后，所有值都會(huì)選中的情況。

是因?yàn)樵诙x綁定值時(shí)，格式出現(xiàn)了問(wèn)題

 <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ù)組，若此時(shí)將checkList:賦值為字符串，則會(huì)出現(xiàn)上述問(wèn)題

在這里插入圖片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet"  rel="external nofollow" >
<!-- 引入組件庫(kù) -->
<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)擊一個(gè)全部選中問(wèn)題

原因是

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

出現(xiàn)這個(gè)問(wèn)題的原因經(jīng)過(guò)排查，是因?yàn)樵谄渌拇a里把ruleForm中的v-modle的數(shù)組屬性的類型轉(zhuǎn)了，當(dāng)時(shí)沒(méi)有發(fā)現(xiàn)，后來(lái)排查發(fā)現(xiàn)了，所以checkbox-group中的v-modle是可以直接使用ruleForm中的屬性，但是需要注意的是必須是數(shù)組且，不要轉(zhuǎn)換了。

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

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

您可能感興趣的文章: