как выделить всю строку в таблице ant-design- vue? - PullRequest
Новая
       21

как выделить всю строку в таблице ant-design- vue?

0 голосов
/ 20 января 2020

У меня есть таблица ant-design- vue, в которой есть функция выбора строки и открытия нового ящика с записью.

это шаблон таблицы. 

<a-table
    :dataSource="employeeData"
    :rowKey="record => record.sgid"
    :pagination="{ pageSize: size }"
    :columns="columns"
    :loading="loading"
    :scroll="{ x: 1300, y: 400 }"
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  >
    <template slot="name" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
    <template slot="id" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
    <template slot="mobile" slot-scope="text, record">
      <div class="click-event" @click="select(record)">{{ text }}</div>
    </template>
</a-table>

с этим кодом я добавляю <div> ко всем слотам, чтобы пользователь мог щелкнуть в любом месте каждого столбца. но между двумя столбцами в строке все еще есть свободное место, которое нельзя щелкнуть. что я должен сделать, чтобы пользователь мог щелкнуть строку, чтобы запустить функцию выбора?

1 Ответ

0 голосов
/ 26 января 2020

Оберните ваш столбец вокруг Link для перенаправления вместо HTML тега привязки <a> <slots /> </a>.

  • response-router-dom

Вы можете использовать Link from react-router-dom и использовать его для запуска вашего компонента или контейнера. Это также изолирует ваш слот функции logi c в отдельном компоненте или контейнере 

import { Link } from 'react-router-dom';

...

 <Link to={`/redirect/to/slot-function-component/`}>
  <Row Content />
 </Link>

...

Важно зарегистрировать этот компонент в routes.js

  • Ant Design: Якорный Компонент

Если вы собираетесь придерживаться Ant Design , тогда вы можете исследовать Якорный Компонент API . Anchor Props и Link Props предоставляют вам множество возможностей для реализации вашего варианта использования несколькими способами.

Изучите API и посмотрите, что соответствует вашим требованиям.

...