antd中組使用checkbox組的一些心得

antd框架下的checkbox可用屬性和方法較少，尤其是<a-checkbox-group>，有時候使用起來不如v-for+<a-checkbox>方便。

這次項目的某個頁面中在它身上花的時間比較多，記下來當做經驗。

 

官方用法：

<a-checkbox-group v-model="value" name="checkboxgroup" :options="plainOptions" @change="onChange" />


const plainOptions = ['Apple', 'Pear', 'Orange'];

 

我的代碼（精簡寫法，不完整）：

流程：接口獲取到值，賦給多選框，使其依次展示並可選用。

<a-checkbox-group class="ell-label" v-model="jobsBox" :options="jobOptions" @change="onChange(jobOptions)">
　　<span slot="label" :title="option.name+'('+option.value+')'" slot-scope="option">{{option.name+'('+option.value+')'}}</span>
</a-checkbox-group>

data(){
　　return{
　　　　jobsBox:[],
　　　　jobOptions: [],
　　}
}

接口名(參數).then(res => {
　　let arr = Object.keys(res.data)
　　if(res.code == 200 && arr.length !== 0 ) {   //當data存在數據時
　　　　if(res.data) {      //標簽存在
　　　　　　res.data.forEach(item => {
　　　　　　　　this.jobOptions.push({ value:item.tabCode, name:item.tabName})
　　　　　　})
　　　　}
　　}
})

　<style>

　.ell-label .ant-checkbox-group-item {

  　width: 130px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

  }

  </style>

 

 

1. 內容展示

label是多選展示出來的內容，value是值。

 

2. 相關數值

jobsBox是雙向綁定的數組，用於存放value值，是多選組value的合集，但只針對選中框。如在該例子中，只有點擊多選框，對應的value值才會push進去。

jobOptions是多選組的全部數據，其中除了label和value，也可以自行添加別的屬性。如在該例子中，name就是自加的屬性。

 

3. 文本溢出

項目中規定的樣式位置較小，而多選的數據為tabName(tabCode)的形式，占位較長，因此需要文本溢出...來使樣式變得工整有序。

但由於checkbox-group的原生樣式，無法直接調整每個item的位置，因此需要在整個<style>的外面重新再寫一個<style>才能更改。

（大佬說可以用>>>或/deep/深度查詢，但我這里不生效，不知道為什么）

 

4. title顯示

使用:title="jobOptions.name+'('+jobOptions.value+')'"會獲取不到數據，顯示undefined。

可以將slot作為插槽插入多選組所需的label，再在其中用option來獲取，加上想要title展示的屬性就好。