ant-design-vue 如何在table表格外的按钮实现全选, 反选功能

最新推荐文章于 2024-06-03 15:01:29 发布
最新推荐文章于 2024-06-03 15:01:29 发布
阅读量4.6k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Landlord_cat/article/details/107111914
版权

效果如图
在这里插入图片描述
这里是ant-design-vue table组件 详情见文档 重点
左侧勾选框 你需要配置 :row-selection="rowSelection"
如图
在这里插入图片描述
它就是通过控制selectedRowKeys :[ ] 来控制选中 不选中状态
在这里插入图片描述
仔细想了下这些方法不用导出 就放在Computed 挺好
在这里插入图片描述
在这里插入图片描述

这样就完成全选功能了 重点是上图 如何将数据的id拿出来存到新数组arr里 然后赋值 其实也没啥

房东的猫〃
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
AntDVue 表格全选反选
weixin_45454281的博客
08-12 2216
table表格全选反选AntDVue子组件template子组件js父组件template父组件js效果如下 AntDVue 公司前端用 Ant Design of Vue为样式。 业务需求如下： table表格实现全选反选 主要组件讲解： 会用到如下table组件，row-selection还请仔细阅读官方文档 子组件template 简易table表格封装 <a-table bordered :row-class-name="rowClass" :loading="l
ant design的table组件实现全选功能以及自定义分页
01-18
我就废话不多说了，大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.state = { visible: false, indeterminate: tru
Ant Design Vue 实现跨页全选
最新发布
然后他就拿棍子来打我
06-03 471
【代码】Ant Design Vue 实现跨页全选。
antd 表格头反选
limingxiaojie的博客
10-31 656
onSelect: (changableRowKeys: string[]) => { let newSelectedRowKeys: string[]=[]; changableRowKeys.forEach(item => { if(!selectedRowKeys.includes(item)) { ...
ant-design-vue 表格使用单选的方法
热门推荐
今日最可爱YeahT
05-14 1万+
参考API：https://www.antdv.com/components/table/#components-table-demo-selection 1，type没有写的时候默认是多选的 ，type为 'radio'是单选的 <s-table ref="tableModal" size="middle" rowKey="id" :columns="devColumns" v-tableScrollBar...
antd-table-react（在table组件外实现全选）
congxue666的博客
03-22 1528
效果图如下： 代码实现： import styles from './index.less'; import React, { useEffect, useState } from 'react'; import { Table, Button} from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', render: (text: string) => <a>{text}&l.
ant design vue 设置表格选择框，全选按钮选不全
陈新科的博客
10-12 2689
左侧勾选框 你需要配置 :row-selection="rowSelection" <a-table :pagination="false" size="small" :row-selection="rowSelection" :columns="columns" :data-source="data" :scroll="{ x: 1100 }" :rowKey="id" //全选是根据这个id判断的，一定要
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
vue2.0在table中实现全选和反选的示例代码
08-28
在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的渲染 在示例代码中，我们可以看到使用 Vue...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
【VUE】表格实现自定义多选 (Ant Design Vue)
weixin_42941628的博客
07-31 1618
【代码】【VUE】表格实现自定义多选 (Ant Design Vue)
Ant Design Vue组件中的Select 选择器实现全选/全不选功能
l2072532254的博客
02-20 1855
【代码】Ant Design Vue组件中的Select 选择器实现全选/全不选功能。
ant-design-vue table 多选支持默认全选功能
qq_36437172的博客
02-09 5487
<a-table size="small" bordered rowKey="id" row-selection={{ onChange: this.handleSelectChange.bind(this), getCheckboxProps: record => { return { props: { defaultChecked: this.selectedRowKeys.includes(record.id...
Ant Design Table组件行合并及表格头下拉筛选
编译的阿喵
03-29 3908
最近在项目中实现了一个Table 相同数据行合并及表格头下拉筛选的需求，这类需求平时在项目中比较少遇到，操作的方法也比较麻烦，因此记录下来方便以后遇到有迹可循。 实现效果 合并相同行数据 对dataSource数据进行处理，判断列scene字段是否有行数据相同，进行提取并添加新字段rowSpan，记录合并的行数 // 合并数组单元格 createNewArr=data => { ...
Antd-table全选踩坑记录
qq_45799465的博客
02-09 2804
andt-table 中选中第一项会影响到后面的每一页的第一项的解决方法，以及全选如何选中所有数据而不是当前数据。
Ant Design Vue.js组件中，穿梭框a-transfer中怎么实现全选
浪潮行舟_chenjin2136
05-18 821
这样，当用户在穿梭框中选择项目时，我们将在组件中保存选定的key值列表，并在选择项目时更新全选状态。属性设置为一个空数组，以便在初始状态下将全选状态设置为初始数据中的key值列表。在Vue.js和Ant Design Vue.js组件中，可以使用。以下是一个示例代码，演示如何在Ant Design Vue.js的。属性为一个提示文本，以便在用户输入搜索关键字时显示该提示文本。方法，用于在用户选择项目时更新全选状态。，以便在穿梭框中显示可搜索的数据。，以便允许用户选择多个项目。在上面的代码中，我们首先在。
vue项目中 Ant Design的表格组件在表格外部设置一个全选按钮控制表格的全选/反选
05-31
可以通过在表格外部添加一个复选框来实现全选/反选功能，具体实现如下： ```vue <template> <div> <a-checkbox v-model="allSelected" @change="handleAllSelectedChange">全选</a-checkbox> <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection"></a-table> </div> </template> <script> import { Table, Checkbox } from 'ant-design-vue'; export default { components: { ATable: Table, ACheckbox: Checkbox, }, data() { return { allSelected: false, dataSource: [ { id: 1, name: 'John Brown', age: 18 }, { id: 2, name: 'Jim Green', age: 24 }, { id: 3, name: 'Joe Black', age: 30 }, ], selectedRowKeys: [], columns: [ { title: 'ID', dataIndex: 'id', }, { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, ], }; }, computed: { rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: this.handleSelectedRowKeysChange, }; }, }, methods: { handleSelectedRowKeysChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys; }, handleAllSelectedChange(checked) { if (checked) { this.selectedRowKeys = this.dataSource.map(item => item.id); } else { this.selectedRowKeys = []; } }, }, }; </script> ``` 在上面的代码中，我们在表格外部添加了一个复选框，并绑定了`allSelected`属性来控制它的选中状态。接着，我们在表格的`rowSelection`属性中设置了`selectedRowKeys`和`onChange`，其中`selectedRowKeys`绑定到了`selectedRowKeys`属性，`onChange`绑定到了`handleSelectedRowKeysChange`方法上。当表格中的行被选中或取消选中时，`selectedRowKeys`会发生变化，`handleSelectedRowKeysChange`方法会被调用。 当全选按钮被选中或取消选中时，我们可以通过`handleAllSelectedChange`方法来实现全选/反选功能。如果全选按钮被选中，则将`selectedRowKeys`设置为所有行的`id`，否则将`selectedRowKeys`清空。这样，就实现了全选/反选功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值