ant-design的批量框踩的坑

最新推荐文章于 2025-03-17 21:38:19 发布

醉醉美丽栗子

最新推荐文章于 2025-03-17 21:38:19 发布

阅读量787

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39990827/article/details/93162983

版权

这是采坑之前的代码，出来的效果就是选中第一页第一行，往后的几页都会自动选中，每页都进行了联动，想了很多方法，依然不起效，后来将a-table中的 :rowKey:“record=>data.id” 改为:rowKey:“record=>record.id” ,问题解决了

<template>
  <div>
    <a-table 
    :rowKey:"record=>data.id" 
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"    	 
     :columns="columns"
     :dataSource="data" />
  </div>
</template>
<script>
const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    }
  },
  computed: {
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    }
  },
}
</script>