помещение

Если есть бизнес-требования, в таблицу необходимо добавить операцию выбора радио, чтобы отобразить дополнительную информацию для этого фрагмента данных. Поскольку библиотека компонентов пользовательского интерфейса использует ant-design-vue, просмотрев API, я обнаружил, что табличный компонент имеет встроенные связанные функции. Просто используйте его напрямую.

Использование

Создайте новый компонент таблицы. Есть два основных параметра, которые нужно установить. rowKey, другой — строка Выбор. rowKey используется для уникальной идентификации текущей строки. И rowSelection имеет три параметра

1. SelectedRowKeys: используется для установки выбранных данных.

2. onChange: выбранное событие

3. тип: установите выбранный тип на радио или флажок.

<a-table
  ref="table"
  size="middle"
  :scroll="{x: 1500}"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  :loading="loading"
  :rowSelection="{selectedRowKeys: checkedKeys, onChange: handleRowClick, type: 'radio'}"
  :customRow="customRowFn"
  @change="handleTableChange">
</a-table>

Установите соответствующие события кликов в методах. Вы можете установить другую связанную логику.

methods：{
    data(){
     return {
      checkedKeys: []
     }
    },
 handleRowClick(e) {
        this.checkedKeys = e
    }
}