Vue中Element的table多选表格如何实现单选
2023-12-26 17:23:29
<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
},
}
文章来源:https://blog.csdn.net/Achong999/article/details/135223485
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!