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)
        })
      }
    },
Logo

前往低代码交流专区

更多推荐