<publicTable
:row-key="getRowKey"
ref="publicTable"
class="table"
:table-data="tableData"
:table-info="tableInfo"
:table-column="columns"
:events="events"
:is-need-pagination="false"
:has-operation="false"
:loading="loading"
:need-select="true"
>
el-table组件的封装_el-table封装-CSDN博客
data() {
return {
selectFlag: false,
oldSelectRow: {},
pagination: {
pageNum: 1,
pageSize: 20,
total: 0
},
tableData: [],
columns: [
// {
// prop: 'xuanZe',
// label: '选择',
// minWidth: '60px',
// isSlot: true
// },
{
prop: 'zhuanKeMC',
label: '专科',
minWidth: '100px'
},
{
prop: 'buMenMC',
label: '发票确认部门',
minWidth: '120px'
},
{
prop: 'caozuo',
label: '操作',
minWidth: '80px',
isSlot: true
}
],
operations: [
{
text: '选择',
type: 'text',
class: 'el-text-color',
callback: row => {
this.handleXuanZeClick(row)
}
}
],
tableInfo: {
stripe: true,
'highlight-current-row': true
},
selectionList: [],
currentSelectData: {},
events: {
// 重点
'selection-change': selection => {
if (selection.length > 1) {
const newRows = selection.filter((it, index) => {
if (index == selection.length - 1) {
this.$refs.publicTable.$refs.tableData.toggleRowSelection(it, true)
return true
} else {
this.$refs.publicTable.$refs.tableData.toggleRowSelection(it, false)
return false
}
})
this.selectionList = newRows
} else {
this.selectionList = selection
}
this.$refs.publicTable.$refs.tableData.setCurrentRow(this.selectionList[0])
},
// 重点
'row-click': row => {
this.selectFlag = !this.selectFlag
if (this.selectFlag) {
this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, true)
this.selectionList.push(row)
this.oldSelectRow = row
} else {
if (this.oldSelectRow === row.zhuanKeID) {
this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, false)
this.oldSelectRow = {}
} else {
this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, true)
this.$refs.publicTable.$refs.tableData.toggleRowSelection(this.oldSelectRow, false)
}
}
}
}
}
},
methods: {
getRowKey(row) {
return row.zhuanKeID
},
}