先說需求 我要在頁面進行checkbox單選并回顯?

第一步先把基本的頁面寫好噢：

vue代碼：別忘了寫change啊

         <el-form-item label="按鈕顏色:" prop="menuColor"><el-checkbox-group v-model="buttonColor" @change="bindCheckBox"><el-checkbox label="default"><el-link>默認</el-link></el-checkbox><el-checkbox label="primary"><el-link type="primary">主要</el-link></el-checkbox><el-checkbox label="info"><el-link type="info">詳情</el-link></el-checkbox><el-checkbox label="warning"><el-link type="warning">警告</el-link></el-checkbox><el-checkbox label="danger"><el-link type="danger">危險</el-link></el-checkbox></el-checkbox-group></el-form-item>

?第二步： 在data 中一個buttonClolor[]? 數組，這個數組你自定義哦

第三步寫方法：

/*checkbox 復選框改為單選*/
bindCheckBox() {if (this.buttonColor.length > 1) {this.buttonColor.splice(0, 1)}
}

關于splice這個函數上一片文章講過或者去百度下很多介紹，此次主要是用刪除數組的方式this.buttonColor.splice(0, 1)的意思是說如果下標從0開始刪除第一個數值，對于我要實現checkbox來說每次change一下就要把前一個值刪掉始終保留一個值，這就是單選的邏輯啊

splice刪除舉例說明：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; f

ruits.splice(0,1);

console.log(fruits);

//["Orange", "Apple", "Mango"];

單選的事情搞定了下面進行數據回顯：清空數組，把新值push進去就行了啊

一定要先清空數組啊

搞定，收工