Vxe-table and el-table are slightly different
If the el-table check box only allows single selection, it can be like this
@row-click="rowClick"
// 点击选中
rowClick(row) {
// 单选
if (!this.multiple) {
if (this.$refs.standTables.selection.length >= 1) {
this.$refs.standTables.selection.length = 1
}
this.$refs.standTables.selection.shift()
}
this.row = row
this.$refs.standTables.toggleRowSelection(row)
},
For vxe-table, it is a little more troublesome.
First, you need to add the configuration item checkbox-config, and the trigger mode is row. Only then can you click on the row to check the check box of the current row.
<vxe-table
ref="invoiceVxeTable"
:checkbox-config="{ checkField: 'checked', trigger: 'row' }"
@checkbox-change="selectEvent"
>
//单选
selectEvent(data) {
let row = data.row
this.invoiceRow = data.row
let isSelect = this.$refs.invoiceVxeTable.isCheckedByCheckboxRow(row)
this.$refs.invoiceVxeTable.setAllCheckboxRow(false)
this.$refs.invoiceVxeTable.setCheckboxRow(row, isSelect)
},
I have a tab switching here, each tab is a list, when switching back, the checked state is still there,
so in the tab-click event of the tab, process it again
<el-tabs v-model="type" @tab-click="handleChange" type="card" >
handleChange(tab, event) {
if (tab.name == 'Detail') {
.................
} else if (tab.name == 'MailingInfo') {
....................
} else {
//如果直接这样写 this.$refs.invoiceVxeTable.toggleCheckboxRow(this.invoiceRow),会不起作用
this.$nextTick(() => {
if (this.$refs.invoiceVxeTable) {
let index = this.masterList.findIndex(item => item.invoiceNo ==
this.invoiceRow.invoiceNo)
this.$refs.invoiceVxeTable.toggleCheckboxRow(this.masterList[index])
}
})
}
},
Update on May 6:
If you want to select single and the check box in the header does not allow multiple selection, you can manually control the hidden check box with css
/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--unchecked-icon {
display: none !important;
}
/deep/ .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--indeterminate-icon {
display: none !important;
}
If you only want to hide the table header and do not control the single selection, you can add checkStrictly: true in the checkbox-config configuration to set the parent and child nodes not to be related to each other, which is not very easy to use
:checkbox-config="{ checkField: 'checked', trigger: 'row' ，checkStrictly: true}"
There is also the checkMethod method, which will disable all columns. How to only disable the header check box has not been implemented yet, to be updated~~~