Vue项目中如何在ant-table组件内展示数据源对应字段数据？

核心逻辑：Ant Design Vue的a-table自定义列插槽的slot-scope默认会返回三个参数：当前行数据record、当前行索引index、当前列配置column，你只要把这几个参数取到就能拿到对应行的字段值和索引。

第一步：先保证columns配置正确 #

你的自定义渲染列需要在columns配置里指定slot名称，示例配置如下：

const columns = [
  // 其他普通列直接配title和dataIndex即可
  {
    title: '客户名称',
    dataIndex: 'client', // 对应数据源里的client字段
    slot: 'clientName' // 和插槽的slot属性对应
  },
  {
    title: '状态',
    dataIndex: 'status', // 对应数据源里的status字段
    slot: 'status' // 和插槽的slot属性对应
  }
]

第二步：修正表格插槽代码 #

你之前的插槽参数写法有误，调整后代码如下：

<a-table
  :columns='columns'
  :pagination='false'
  :data-source='tableDataSource'
  class='table table-small'
>
  <!-- 客户名称自定义插槽 -->
  <template slot='clientName' slot-scope='record'>
    <!-- record就是当前行的整行数据，直接取对应字段即可 -->
    <a :href='record.client.id'>
      {{record.client.firstName}}
    </a>
  </template>
  <!-- 状态下拉自定义插槽，同时拿到行数据和行索引 -->
  <template slot='status' slot-scope='record, index'>
    <a-select
      class='status-select'
      @change="event => handleChangeStatus(event, record, index)"
      :default-value='record.status'
      :key='index'
      name='status'
    >
      <a-select-option
        v-for='item in bookingClassesStatus'
        :key='item.id'
        :value='item.value'
      >
        {{ item.text }}
      </a-select-option>
    </a-select>
  </template>
</a-table>

改动说明 #

• 插槽的slot-scope第一个参数默认是当前行的完整数据，你可以直接取任意字段，不需要自己通过索引去数据源数组里查
• 如果需要行索引，在slot-scope里加第二个参数即可拿到，对应tableDataSource数组的下标
• 下拉选择的默认值直接从当前行数据的status字段取即可，change事件也可以把当前行数据传进去方便后续更新数据源

内容的提问来源于stack exchange，提问作者sashafromlibertalia