antd-vue - - - - - row-selection的使用

news/2024/10/31 3:20:34/

1. 正常需求使用

antd-vue table
官方示例代码如下:

<template><a-table :row-selection="rowSelection" :columns="columns" :data-source="data"><template #bodyCell="{ column, text }"><template v-if="column.dataIndex === 'name'"><a>{{ text }}</a></template></template></a-table>
</template>
<script>
import { defineComponent } from 'vue';
const columns = [{title: 'Name',dataIndex: 'name',
}, {title: 'Age',dataIndex: 'age',
}, {title: 'Address',dataIndex: 'address',
}];
const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',
}, {key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',
}, {key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',
}, {key: '4',name: 'Disabled User',age: 99,address: 'Sidney No. 1 Lake Park',
}];
export default defineComponent({setup() {const rowSelection = {onChange: (selectedRowKeys, selectedRows) => {console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);},getCheckboxProps: record => ({disabled: record.name === 'Disabled User',// Column configuration not to be checkedname: record.name,}),};return {data,columns,rowSelection,};},
});
</script>

关键点如下:

  • table标签上配置row-selection配置项
  • row-selection配置项内需包含onChange& getCheckboxProps

2. 特殊需求使用

需要动态切换是否展示table的选择框

2.1 治标办法

动态切换class,样式如下

.ant-table-selection-column {display: none;
}

2.2 治本办法

在配置row-selection时多一步判断,如:
:row-selection="inner ? rowSelection : undefined"

当将其值设为undefined时即可


http://www.ppmy.cn/news/62055.html

相关文章

jeecgboot online代码生成 一对多

首先把前后端环境都起起来&#xff0c;此处略 点击online表单开发&#xff0c;设计主附表&#xff0c;表示一对多(一对一)关系&#xff0c;“一”对应主表&#xff0c;“多”对应附表&#xff0c;如图 表设计完成&#xff0c;点击同步可直接在数据库中生成数据表。 附表注意…

ERP与WMS有哪些区别和联系?

一、什么是ERP ERP&#xff08;Enterprise Resource Planning&#xff09;是企业资源计划系统&#xff0c;它是一套综合的管理软件系统&#xff0c;可以帮助企业对各种业务管理、生产制造、供应链、销售财务等进行管理和优化。ERP系统的核心功能包括人力资源管理、物料管理、财…

如何在Emacs中设置字体大小?- 探索Emacs的设置字体大小方法

如何在Emacs中设置字体大小&#xff1f; Emacs是一款强大的文本编辑器&#xff0c;它拥有一些强大的功能&#xff0c;其中之一就是字体大小设置。虽然大多数编辑器都支持字体大小设置&#xff0c;但是Emacs的设置方式可能更加直观和易于使用。下面是如何在Emacs中设置字体大小的…

记录一次docker镜像迁移过程

1.在母本服务器上查看要复刻的docker镜像。 sv800:build 作为docker镜像源[repository:tag],使用docker save 指令提出docker镜像包rk3588.tar docker save -o rk3588.tar sv800:build 2.在新环境下加载docker镜像包&#xff0c;预先安装docker指令工具 docker load -i rk35…

等保定级怎么做

Q25:现在还没做等保还来得及吗?有什么影响? 答:来得及。种一棵树,最好的时间是十年前,其次是现在。可先根据定级备案要求和流程,先向公安递交定级备案文件,测评与整改预算提上日程,在经费未落实前,可以先进行系统定级、差距分析、整改计划制订等工作。 根据《等保工…

八、(了解即可)MyBatis懒加载(或者叫延迟加载)

文章目录 八、懒加载(了解即可)8.1 为啥需要懒加载?8.2 懒加载是什么&#xff1f;8.3 开启方式8.4 既然fetchType可以控制懒加载那么我仅仅配置fetchType不配置全局的可以吗&#xff1f;8.5 aggressiveLazyLoading是做什么么的&#xff1f;8.6 注意点8.7 案例验证懒加载准备工…

Python每日一练:小艺的口红(暴力、二分、图论三种方法)代写匿名信

文章目录 前言0、题目一、暴力查找二、二分查找三、有序二叉树总结&#xff08;代写匿名信&#xff09; 前言 很明显小艺的口红问题是考的是查找算法&#xff0c;对于这种一次性查找&#xff0c;直接暴力就行了&#xff0c;当然咱是为了学习&#xff0c;所以用来练练各种查找&…

java环境Springboot框架中配置使用GDAL,并演示使用GDAL读取shapefile文件

GDAL是应用广泛的空间数据处理库&#xff0c;可以处理几何、栅格数据&#xff0c;Springboot是常用的JAVA后端开发框架。本文讲解如何在Springboot中配置使用GDAL。本文示例中使用的GDAL版本为3.4.1&#xff08;64位&#xff09; 图1 GDAL读取shp效果 一、部署GDAL类库 将GDA…