使用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
},
Logo

前往低代码交流专区

更多推荐