antdv中Table组件点击当前行的任意位置选中
使用antdv的带有复选框或者单选框的table组件,只有在点击复选框或者单选框时才能选中当前行,不太方便操作,现在需要在点击当前行的任意位置就能选中当前行:官网文档vue代码<a-table:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"rowKey="id"size="small"
·
使用antdv的带有复选框或者单选框的table组件,只有在点击复选框或者单选框时才能选中当前行,不太方便操作,现在需要在点击当前行的任意位置就能选中当前行:
- 官网文档
- vue代码
<a-table
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
rowKey="id"
size="small"
:columns="columns"
:dataSource="data"
:pagination="false"
:scroll="{y: 600}"
:customRow="loadCustomRow"
></a-table>
- js代码
// 变量
data () {
return {
selectedRowKeys: [],
selectedRows: [],
}
// methods
loadCustomRow (record, index) {
return {
on: {
click: () => {
// 记录为disabled则直接返回,默认为不可选
if (record.disabled) return
const type = 'checkbox'
const key = record.id || index
let selectedRows = this.selectedRows
let selectedRowKeys = this.selectedRowKeys
if (type === 'radio') {
selectedRowKeys = [key]
selectedRows = [record]
} else if (!this.selectedRowKeys.includes(key)) {
selectedRowKeys.push(key)
selectedRows.push(record)
} else {
const index = this.selectedRowKeys.findIndex(skey => skey === key)
selectedRows.splice(index, 1)
selectedRowKeys.splice(index, 1)
}
this.updateSelect(selectedRowKeys, selectedRows)
this.onSelectChange(selectedRowKeys, selectedRows)
}
}
}
},
updateSelect (selectedRowKeys, selectedRows) {
this.selectedRows = selectedRows
this.selectedRowKeys = selectedRowKeys
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
更多推荐
已为社区贡献10条内容
所有评论(0)