vue+ant design操作列显示错行

如果你在 Vue 和 Ant Design 中的操作列显示错行，可能是因为你的代码没有正确地设置 rowKey 属性。在 Ant Design 的表格组件中，rowKey 属性用于设置每一行的唯一标识符。如果没有正确设置 rowKey，Ant Design 将无法正确地渲染表格，导致操作列显示错行。

解决方法如下：

在表格组件中设置 rowKey 属性，例如：

<template>
  <a-table :columns="columns" :data-source="data" row-key="id"></a-table>
</template>

确保 rowKey 的值是每一行的唯一标识符。例如，如果你的数据中有一个 id 属性，可以将它作为 rowKey 的值。

data() {
  return {
    data: [
      { id: 1, name: 'John', age: 20 },
      { id: 2, name: 'Mike', age: 25 },
      { id: 3, name: 'Lisa', age: 30 }
    ],
    columns: [
      { title: 'Name', dataIndex: 'name' },
      { title: 'Age', dataIndex: 'age' },
      { title: 'Action', scopedSlots: { customRender: 'action' } }
    ]
  }
}

在操作列中使用 scopedSlots，并将 record 作为参数传递给自定义渲染函数。例如：

columns: [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  {
    title: 'Action',
    scopedSlots: {
      customRender: (text, record) => (
        <span>
          <a-button type="link" onClick={() => this.edit(record)}>
            Edit
          </a-button>
          <a-button type="link" onClick={() => this.delete(record)}>
            Delete
          </a-button>
        </span>
      )
    }
  }
]

以上是可能解决 Ant Design 操作列显示错行的方法。