1. 程式人生 > >iview表格自定義多選框

iview表格自定義多選框

列中定義:
{
  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 = []
  }

},