antdv 选中table任意位置，即选中checkbox

antdv 选中table任意位置，即选中checkbox

import { CreateElement } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import { columns, UMInfo } from "./columns";
import "./index.less"

@Component
export default class AllTable extends Vue {
  // @Prop({ default: [] }) list!: Array<any>
  // table属性
  private columns: object[] = columns
  private dataSource: any[] = []
  private selectedRowKeys: any[] = []
  private selectedRows: any[] = []
  private UMInfoList: any[] = []
  // 公共属性
  private loading = false
  // 计算属性
  private get rowSelection(): any {
    return {
      onChange: this.onSelectChange,
      getCheckboxProps: this.onGetCheckboxProps
    }
  }
  // 方法
  private created() {
    this.getDataSource()
  }
  private getDataSource() {
    for (let i = 0; i < 100; i++) {
      this.dataSource.push(
        {
          index: i + 1,
          name: "小刚",
          age: 20,
          sex: "1",
          work: "IT",
          address: "深圳",
          img: "img",
          hobby: "打游戏",
          game: "LOL",
          skill: "前端",
          beforeGirls: "S",
          nowGirls: "H",
          afterGirls: "E",
          property: "3W",
          debt: "2W"
        })
    }
  }
  private getUMInfoList() {
    for (let i = 0; i < 30; i++) {
      this.UMInfoList.push({
        UMCode: `1001${i}`, ratio: `5${i}`
      })
    }
    return this.UMInfoList
  }
  private onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    this.updateSelect(selectedRowKeys, selectedRows)
  }
  private onGetCheckboxProps = (record: any) => ({
    props: {
      disabled: record.orgno === '002', // Column configuration not to be checked
      name: record.name,
    }
  })
  private updateSelect(selectedRowKeys: any, selectedRows: any) {
    this.selectedRows = selectedRows
    this.selectedRowKeys = selectedRowKeys
  }

  private customRow(record: any, index: number) {
    return {
      on: {
        click: () => {
          // 记录为disabled则直接返回，默认为不可选
          if (record.disabled) return
          const type = 'radio'
          const key = index + 1

          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)
          this.onGetCheckboxProps(record)
        }
      }
    }
  }

  private handleEdit() {

  }
  // 渲染
  render(h: CreateElement) {
    const scopedSlots = {
      action: (text: string, record: any, index: number) => {
        return (
          <div>
            <a-button icon="eye" size="small" style={{ marginRight: "2px" }}>查看</a-button>
            <a-button icon="edit" size="small" style={{ marginRight: "2px" }}>修改</a-button>
            <a-button icon="delete" size="small" style={{ marginLeft: "2px" }}>删除</a-button>
          </div >
        )
      },
      customWork: (text: string, record: any, index: number) => {
        return (
          <a-tooltip placement="top">
            <span>{record.work}</span>
            <span slot="title">
              55555
              {/* <a-table columns={UMInfo} dataSource={this.dataSource} rowKey={(record: any, index: number) => index} ></a-table> */}
            </span>
          </a-tooltip>

        )
      }
    }
    return (
      <div class="table-box">
        <a-table rowKey={(record: any, index: number) => record.index} columns={this.columns} dataSource={this.dataSource} scopedSlots={scopedSlots} scroll={{ x: 2000, y: 800 }} loading={this.loading} rowSelection={{ type: 'radio', ...this.rowSelection, selectedRowKeys: this.selectedRowKeys }} customRow={this.customRow}>
          <span class='a' slot="customTitle">
            姓名
            {/* <a-tooltip >
              <a-icon class='smile' type="smile-o"></a-icon>
              <span class='smt' slot="title">
                something!!!
              </span>
            </a-tooltip> */}

          </span>
        </a-table>
      </div>
    )

  }
}