用ant-table组件实现表格数据单选效果记录

需求：
1.选中列表数据实现单选效果；
2.支持单列模糊搜索（官网例子）这个搜索是前端进行处理的没有调用后台接口去处理，可根据自己的需求去改进；
3.业务场景：切换页码时；数据搜索过滤时；页面单选效果也不会丢失；
之前自己实现了一个但是还差个搜索功能，而且之前的列表是滚动的，所以还是想说用现成的组件进行改造更加快捷而且也满足需求，能不造轮子就不自己造

效果如下：

代码如下：

<template>
  <a-table
      :data-source="data"
      :columns="columns"
      :pagination="{ defaultPageSize: 2 }"
      :customRow="rowClick"
    >
      <template slot="radioCheck" slot-scope="text">
        <a-radio-group v-model="formData.flavor">
          <a-radio :value="text"></a-radio>
        </a-radio-group>
      </template>
      <div
        slot="filterDropdown"
        slot-scope="{
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          column
        }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`Search ${column.dataIndex}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="
            () => handleSearch(selectedKeys, confirm, column.dataIndex)
          "
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          Search
        </a-button>
        <a-button
          size="small"
          style="width: 90px"
          @click="() => handleReset(clearFilters)"
        >
          Reset
        </a-button>
      </div>
      <a-icon
        slot="filterIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <template slot="customRender" slot-scope="text, record, index, column">
        <span v-if="searchText && searchedColumn === column.dataIndex">
          <template
            v-for="(fragment, i) in text
              .toString()
              .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
          >
            <mark
              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
              :key="i"
              class="highlight"
              >{{ fragment }}</mark
            >
            <template v-else>{{ fragment }}</template>
          </template>
        </span>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </a-table>
  </div>
</template>
<script>
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Joe Black',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Jim Green',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park'
  }
]

export default {
  name: 'test',
  data() {
    return {
      formData: { flavor: 1 }, //单选绑定数据
      data,
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns: [
        {
          title: ' ',
          dataIndex: 'key',
          scopedSlots: { customRender: 'radioCheck' }
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) =>
            record.name.toString().toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
          ellipsis: true
        }
      ],
      //点击行
      rowClick: record => ({
        on: {
          click: () => {
            // console.log(record);
            this.clickRow(record) //触发methods中的方法
          }
        }
      })
    }
  },
  methods: {
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      console.log('searchText', this.searchText)
      console.log('searchedColumn', this.searchedColumn)
    },

    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    clickRow(value) {
      this.formData.flavor = value.key
    }
  }
}
</script>

<style scoped>
.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}
</style>