1.给columns添加列属性
columns() {
sortedInfo = sortedInfo || {};
return [
{
title: "工程",
dataIndex: "outputProject",
width: 80
},
{
title: "是否显示小数",
dataIndex: "showDecimalsOrnot",
width: 80,
scopedSlots: { customRender: 'showDecimalsOrnot'}
}
];
},
scopedSlots: { customRender: ‘showDecimalsOrnot’} 必须添加，目的是为了渲染HTML属性，不加画面显示不出来
2.在a-table中插入想要显示的内容
<a-table :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="false" bordered
:rowKey="record => record.outputProject" :scroll="{ x: 100 }"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect:onSelectEvent}" v-decorator="['list',{rules: [{ required: true}]}]">
<template slot="showDecimalsOrnot" slot-scope="text, record">
<a-switch
:checked="record.showDecimalsOrnot === 1 ? true : false"
@change="switchOnChange(record,$event)"
:disabled ="record.outputProject === 'Appearance' ? true : false"
/>
</template>
</a-table>
a-switch中 slot 的属性值必须和columns中的一致【scopedSlots: { customRender: ‘showDecimalsOrnot’}】，
slot-scope中则是要传的参数
3.最终效果
4.联动：选中checkbox按钮勾选+switch开关同时选择时，去除前者勾选，后者自动关闭
① a-table 中添加事件：onSelect:onSelectEvent ，此处不要加传的参数，不然报错，在具体的方法中加参数如下：
onSelectEvent(record,selected,selectedRows,event){
if(!selected && record.showDecimalsOrnot === 1){
record.showDecimalsOrnot = 0
}
},
官网：
onSelect - 用户手动选择/取消选择某列的回调 -
Function(record, selected, selectedRows, nativeEvent)
（1）record：所传的object，
（2）selected：是否选择，
（3）selectedRows目前勾选的所有的checkbox
② 最后在a-switch 中使用三元表达式来控制是否勾选：
:checked="record.showDecimalsOrnot === 1 ? true : false"
