【antd-design-vue+a-table】自定义列实现全选+全不选
antd-design-vue的a-table想自定义列实现全选和全不选的功能文档中添加:row-selection=“rowSelection” 可以实现第一列全是复选框不是我要的效果百度也没有搜到自己想要的,无奈用了比较蠢的方法。如果有大佬有更简单的方法,还希望不吝赐教。<a-table ref="table" size="default" :columns="columns" :dat
·
antd-design-vue的a-table想自定义列实现全选和全不选的功能
文档中添加:row-selection=“rowSelection” 可以实现第一列全是复选框
不是我要的效果
百度也没有搜到自己想要的,无奈用了比较蠢的方法。如果有大佬有更简单的方法,还希望不吝赐教。
<a-table ref="table" size="default" :columns="columns" :data="loadData">
<span slot="shortMessage" class="messageShort">
<span class="messageInfo" <a-checkbox @change="onShortChange($event)"> </a-checkbox>>短信提醒</span>
</span>
<span slot="Remindtype" slot-scope="text, record">
<a-checkbox @change="onRemidChange(text, record)" v-model="record.fVcShortMessage"> </a-checkbox>
</span>
<span slot="action" slot-scope="text, record">
<a @click="$refs.addMessageModules.add(record)">编辑</a>
<a-divider type="vertical" />
<a @click="DelUserMessages(record)">删除</a>
<a-divider type="vertical" />
<a @click="$refs.setmsgRecipientModules.add(record)">配置</a>
</span>
</a-table>
在data中
setMessageList: [],//主列表数组
shortCheckedarr: [],//表头全选
shortNotcheckarr: [],//表头全不选
columns: [
{
title: '序号',
align: 'center',
width: 90,
customRender: (text, record, index) => index + 1
},
{
align: 'center',
dataIndex: 'fVcShortMessage',
slots: { title: 'shortMessage' },
scopedSlots: { customRender: 'Remindtype' }
},
{
title: '操作',
align: 'center',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
获取主列表数据的时候,把数组赋值给setMessageList 数组。 this.setMessageList = res.data
// 短信提醒表头复选框
onShortChange(data) {
this.setMessageList.forEach(item => {
if (data.target.checked) {
item.fVcShortMessage = 1
this.shortCheckedarr.push({
fPkConfigureId: item.fPkConfigureId,
fVcMessageName: item.fVcMessageName,
fVcShortMessage: item.fVcShortMessage
})
} else {
item.fVcShortMessage = 0
this.shortNotcheckarr.push({
fPkConfigureId: item.fPkConfigureId,
fVcMessageName: item.fVcMessageName,
fVcShortMessage: item.fVcShortMessage
})
}
})
if (data.target.checked) {
MessagesUpdateId(this.shortCheckedarr).then(res => {
console.log(res, '修改信息接口全选')
this.$message.success('添加成功')
this.$refs.table.refresh(true)
})
} else {
MessagesUpdateId(this.shortNotcheckarr).then(res => {
console.log(res, '修改信息接口全不选')
this.$message.success('移除成功')
this.$refs.table.refresh(true)
})
}
},
// 短信提醒多选框
onRemidChange(data, record) {
if (data == 0) {
record.fVcShortMessage = '1'
MessagesUpdateId([
{
fPkConfigureId: record.fPkConfigureId,
fVcMessageName: record.fVcMessageName,
fVcShortMessage: record.fVcShortMessage
}
]).then(res => {
console.log(res, '短信提醒 res')
this.$message.success('添加成功')
this.$refs.table.refresh(true)
})
} else {
record.fVcShortMessage = '0'
MessagesUpdateId([
{
fPkConfigureId: record.fPkConfigureId,
fVcMessageName: record.fVcMessageName,
fVcShortMessage: record.fVcShortMessage
}
]).then(res => {
this.$message.success('移除成功')
this.$refs.table.refresh(true)
})
}
},
更多推荐
已为社区贡献35条内容
所有评论(0)