ant中table组件全选选中所有行(ant design2.2.8)

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

过程：

1.先写一个有数据的table

2.增加rowKey

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

3.分页

data中配置：

// 表格数据
tableData: [
{
id: 98,
name: “是二本”,
age: “1345”,
myname: “边缘设备”,
person: “geren”
},
{
id: 33,
name: “qerljk”,
age: “1231234”,
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: "1345",
                    myname: "边缘设备",
                    person: "geren"
                },
                {
                    id: 33,
                    name: "qerljk",
                    age: "1231234",
                    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)
        },
        }

总结

本文用于个人笔记，主要用于学习交流（ant design2.2.8）