列中定义:
{ 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"> 是</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"> 是</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 = [] } },