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

过程：

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）

ant中table组件全选选中所有行(ant design2.2.8)相关推荐

vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
DevExpress 中在做全选的全消功能的时候加快效率
DevExpress 中在做全选的全消功能的时候加快效率在做 DevExpress 中对增加的选择 Check列控制全选的全消时通过以下代码红色字代码效率会有明显的提升: private vo ...
layui结合form,table的全选、反选v1.0
layui结合form,table的全选.反选v1.0 需要引入layui.css和layui.js html代码如下: <div class="layui-form"> ...
原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...
uni-app中checkbox-group实现全选功能
uni-app中checkbox-group实现全选功能功能描述: 点击全选框,选项全被选中,再次点击,选项全不被选中全选框选中状态下,取消任一选项,全选框不被选中,并且在全选框不被选中的状态下, ...
antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
使用NG-ZORRO（Angular 组件库）中Table组件，通过columnTable属性固定列，结果每行数据内容穿透了两遍的固定列；鼠标滑过该条数据时，两侧固定列的背景色不跟着改变～
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
使用 iReport中table组件制作表格导出PDF
一.iReport安装 1.下载安装包: 2.直接按默认安装完成. 3.安装完成后iReport还不能启动,会闪退,请继续下面的操作 4.下载jdk_1.7并安装.注意:不需要配置jdk_1.7版本的 ...

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