【antd-design-vue+a-table】自定义列实现全选+全不选

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)
        })
      }
    },
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值