携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

如需跳过过程，查看全部代码，请下拉到最后

过程：

第一步先写一个有数据的table

第二步增加rowKey

在table组件中增加rowKey="id" id为你对象数组中每个对象的id,如果对象中没有id ,该id为下标

第三步分页

data中配置：

//  表格数据
            tableData: [
                {
                    id: 98,
                    name: "克里斯丁",
                    age: "44",
                    myname: "边缘设备",
                    person: "geren"
                },
                {
                    id: 33,
                    name: "阿斯加德",
                    age: "16",
                    myname: "边缘设备",
                    person: "geren"
                }
            ],
//  表格配置的列
            columns: columns,
            // 分页配置
            pagination: {
                current: 1,
                defaultCurrent: 1,
                pageSize: 1,
                onChange: this.onPageChange.bind(this)
            },
           
方法中配置：
//翻页改变
        onPageChange(current) {
            this.pagination.current = current
        },

4.为每个表格增加多选框

5.实现全选单选，和反选

完整代码块：

<a-table
    :row-selection="{
     selectedRowKeys: selectedRowKeys,
     onSelectAll: onSelectAll,
     onSelect: onSelect
     }"
     :columns="columns"
     :data-source="tableData"
      bordered
      :loading="tableLoading"  
      :pagination="pagination"
       rowKey="id"
       >
   <template v-slot:num="slotProps">{{
        (pagination.current - 1) *
         pagination.pageSize +slotProps.index +1
         }}</template>
   <template #releaseStatus="{ record }">
       <span>
         {{                                   record.releaseStatus == 0 ? "未发布": "已发布"}}
      </span>
   </template>
   <template #action="{ record }">
   <span @click="updateReleaseClick(record)" >
       <a class="release-text-c">发布</a>
         </span><span class="mar-L10"
            @click="rowClick(record)"
             <a>查看</a> </span>
               <span class="mar-L10"
                    @click="deleteData(record)" >
              <a class="del-text-c">删除</a>
               </span>
              </template>
</a-table>
<script>
const columns = [
    {
        title: "序号",
        width: 80,
        align: "center",
        slots: { customRender: "num" }
    },
    {
        title: "名称",
        dataIndex: "name",
        align: "center",
        key: "name",
        ellipsis: true
    },
    {
        title: "创建时间",
        dataIndex: "age",
        align: "center",
        key: "age"
    },
    {
        title: "发布的边缘设备名称",
        dataIndex: "myname",
        align: "center",
        key: "myname"
    },
    {
        title: "创建人",
        key: "person",
        align: "center"
    },
    {
        title: "操作",
        key: "action",
        align: "center",
        slots: { customRender: "action" }
    }
]

 data() {
        return {
         // 表格懒加载
            tableLoading: false,
            // 选中行  id数组
            selectedRowKeys: [],
             //  表格数据
            tableData: [
                {
                    id: 98,
                    name: "克里斯丁",
                    age: "44",
                    myname: "边缘设备",
                    person: "geren"
                },
                {
                    id: 33,
                    name: "阿斯加德",
                    age: "16",
                    myname: "边缘设备",
                    person: "geren"
                }
            ],
            //  表格配置的列
            columns: columns,
            // 分页配置
            pagination: {
                current: 1,
                defaultCurrent: 1,
                pageSize: 1,
                onChange: this.onPageChange.bind(this)
            },
             }
    },
    methods: {
		onSelect(record, selected, selectedRows, nativeEvent) {
            // console.log("单选选择")
            this.selectedRowKeys = selectedRows.map(pro => pro.id)
            console.log(this.selectedRowKeys)
        },
        onSelectAll(selected, selectedRows, changeRows) {
            // console.log("全选")
            if (selected) {
                // 全选
                this.selectedRowKeys = this.tableData.map(pro => pro.id)
            } else {
                // 反选
                this.selectedRowKeys = []
            }
            // console.log(this.selectedRowKeys)
        },
        }