iview表格自定义多选框

最新推荐文章于 2025-06-10 14:54:33 发布

原创最新推荐文章于 2025-06-10 14:54:33 发布 · 5.7k 阅读

3 ·

CC 4.0 BY-SA版权

idea 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在表格中设置短信与邮件通知的全选与多选功能，包括使用Checkbox组件进行交互，以及如何通过v-model实现数据绑定，确保用户能够灵活地选择接收通知的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列中定义：

{
  title: '是否短信通知',
  key: 'isSmsnotify',
  render: (h, params) => {
    return h(
      'div',
      this.$refs.myTable.$scopedSlots.smsnotifyCheckAction({ id: params.row.id })
    )
  },
  renderHeader:(h,params) => {
    return h('div',[
      h('Checkbox',{
        props:{
          value: this.isSmsnotifyCheck,
        },
        on: {
          'on-change': this.isSmsnotifyCheckclickHandler
        }
      },'是否短信通知')
    ])
  }
},{
  title: '是否邮件通知',
  key: 'isMailNotify',
  render: (h, params) => {
    return h(
      'div',
      this.$refs.myTable.$scopedSlots.mailNotifyCheckAction({ id: params.row.id })
    )
  },
  renderHeader:(h,params) => {
    return h('div',[
      h('Checkbox',{
        props:{
          value: this.isMailNotifyCheck,
        },
        on: {
          'on-change': this.isMailNotifyCheckclickHandler
        }
      },'是否邮件通知')
    ])
  }

表格中定义：

  <Table ref="myTable" height="250" :columns="userColumns"
         @on-selection-change="onSelectChangeUser"
         size="small"
         :data="selectData" style="margin-top: 10px;">
  <template slot="smsnotifyCheckAction" slot-scope="props">
   <span>
    <input type="checkbox" class="magic-checkbox"  :id='props.id'
           v-model="smsnotifyCheck" :value="props.id"  />
    <label :for="props.id">&nbsp;&nbsp;是</label>
     </span>
  </template>

  <template slot="mailNotifyCheckAction" slot-scope="props">
   <span>
    <input type="checkbox" class="magic-checkbox"  :id='props.id'
           v-model="mailNotifyCheck" :value="props.id"  />
    <label :for="props.id">&nbsp;&nbsp;是</label>
     </span>
  </template>

</Table>

方法：

isSmsnotifyCheckclickHandler:function (status) {//邮件全选多选框
  this.isSmsnotifyCheck = status
  if(status==true){
    this.smsnotifyCheck = this.tempSmsnotifyCheck
  }else{
    this.smsnotifyCheck = []
  }
},
isMailNotifyCheckclickHandler:function (status) {//短信全选多选框

  this.isMailNotifyCheck = status
  if(status==true){
    this.mailNotifyCheck = this.tempMailNotifyCheck
  }else{
    this.mailNotifyCheck = []
  }

},