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展示的属性就好。