element表格自定义表头两列多选

最新推荐文章于 2024-06-01 16:31:18 发布

奈何桥上哈啤酒

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量247

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yangpengxunb/article/details/131189822

版权

效果：

一行只能选一个checkbox

全选功能

代码：

html

<el-table-column  :render-header="(h, obj) => renderHeader3(h, obj,index)" align="center" width="75">
					<template slot-scope="scope">
						<div  style="padding-left:10px">
							<el-checkbox
						:disabled="scope.row.status=='3'||scope.row.status=='4'"
						v-model="scope.row.ownerchecked"
						@change="changeOwen(index,scope.row)"
						/>
						</div>
					</template>
				</el-table-column>
				<el-table-column  :render-header="(h, obj) => renderHeader4(h, obj,index)" align="center" width="75">
					<template slot-scope="scope">
						<div  style="padding-left:10px">
						<el-checkbox
						:disabled="scope.row.status=='3'||scope.row.status=='4'"
						v-model="scope.row.memberchecked"
						@change="changeMember(index,scope.row)"
						/>
					</div>
					</template>
				</el-table-column>

renderHeader3(h, obj,index) {
			return h('div', {
              style:'margin-left:-25px;'
            }, [
				h('span', '签收'),
				h('input', {
				style: 'margin-left:5px;',
				attrs: {
					id: 'check3',
					type: 'checkbox'
				},
				on: {
					change: ($event) => {
						this.odReceiptDetails[index].palletGoodsList_array.forEach((item) => {
						if (item.status!='3'&&item.status!='4') {
						this.$set(item, 'ownerchecked', $event.target.checked)
						if (item.memberchecked) {
						this.$set(item, 'memberchecked', (!$event.target.checked))
						}
						}
						this.remderMemberCheck(index)
					})
					}
				}
				}),
			])
		},
		renderHeader4(h, obj,index) {
			return h('div', {
              style:'margin-left:-25px;'
            }, [
				h('span', '拒签'),
				h('input', {
				style: 'margin-left:5px',
				attrs: {
					id: 'check4',
					type: 'checkbox'
				},
				on: {
					change: ($event) => {
						this.odReceiptDetails[index].palletGoodsList_array.forEach((item) => {
							if (item.status!='3'&&item.status!='4') {
							this.$set(item, 'memberchecked', $event.target.checked)
							if (item.ownerchecked) {
							this.$set(item, 'ownerchecked', (!$event.target.checked))
							}
							}
						this.remderOwnerCheck(index)
					})
					}
				}
				}),
				
			])
		},

	remderOwnerCheck(index) {
      const check = document.getElementById('check3')
      check.checked = this.odReceiptDetails[index].palletGoodsList_array.every((i) => i.ownerchecked)
    },
    // 点击每一行时判断是否勾选表头的全选
    remderMemberCheck(index) {
      const check = document.getElementById('check4')
      check.checked = this.odReceiptDetails[index].palletGoodsList_array.every((i) => i.memberchecked)
    },
	changeOwen(index,row) {
		if (row.memberchecked) {
			row.memberchecked=!row.ownerchecked
		}
      this.remderOwnerCheck(index)
    },
    changeMember(index,row) {
		if (row.ownerchecked) {
			row.ownerchecked=!row.memberchecked
		}
      this.remderMemberCheck(index)
    },