前一段时间，在弄antd的框架，感觉MVVM的写法真的很香。组件各种封装。

遇到一个需求：需要实现table表格的单选功能：

代码如下：

1.html部分的代码

<a-table
  :columns="taskOrderColumns"
  :dataSource="taskOrders"
  :rowKey="(r,i)=>{i.toString()}"
  :pagination="false"
  :row-selection="{
    selectedRowKeys: selectedRowKeys,
    type: 'radio',
  }"
  :customRow="loadCustomRow"
>
</a-table>

2.参数解析

2.1 taskOrderColumns:表格的列

2.2 dataSource:表格的数据，数组格式

2.3 rowKey:表格行内容的唯一值，不能重复：(r,i)=>{i.toString()}

2.4 pagination:设置为false表示不展示分页

2.5 row-selection:选择项设置

:row-selection="{
  selectedRowKeys: selectedRowKeys,
  type: 'radio',
}"

selectedRowKeys:选中项的数组集合，如果是单选，则永远只有一项。如果是多选，则会有多项
type: 'radio':单选，如果要设置为多选，则type:checkbox

2.6 customRow:设置行属性，是一个函数形式

3.js部分代码

taskOrderColumns和dataSource，此处就不赘述了，只要格式对，参数匹配，都没啥问题的。重点描述customRow的部分

loadCustomRow(record, index) {
  return {
    on: {
      click: () => {//监听的是单选框的点击事件
        this.changeRadioTable(record, index);
      },
      change: () => {//监听的是行的点击事件
        this.changeRadioTable(record, index);
      },
    },
  };
},
changeRadioTable(record, index) {
  if (record.disabled) return;
  const type = "radio";
  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;
  this.selectedTaskOrder = selectedRows[0];
},