antdesign vue 自定义实现可选表格，表格某列选项可选、行可选、表头可选

已于 2023-12-28 15:24:58 修改
阅读量1.4k 收藏 13
点赞数 13
文章标签： vue.js 前端 javascript anti-design-vue
于 2023-12-22 17:33:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/licongmingli/article/details/135156458
版权

需求：
表格指定列中所有单选框的选中状态与对应行的单选框状态，两两相关；
每一行的单选框状态又与表头的单选框状态，两两相关。

ps: 语言好难描述清除~~
相关知识：可选择表格（antdesign 有该功能，先来看下示例~）
功能：参考checkBox实现全选效果
（1）当选择某些行时，表头是部分选样式；所有行选中时，表头会是选中状态；所有行不选时，表头是非选中状态。
（2）当点击表头单选框为选中状态时，每一行会变为选中状态。相反~
在这里插入图片描述
在这里插入图片描述
我的需求是要在上述示例中进一步扩展~增加行与表格数据的关联操作！
一开始想要直接使用上述antd table提供的api（row-selection）扩展，发现内部是使用的
checkBox与checkbox group实现全选效果。由于部分选会用到indeterminate属性，但checkbox group不具有该属性，只有checkBox具有该属性。因此每一行就不能实现部分选样式，只能自己写啦~

**

正文开始：

先来看下实现效果~

最低0.47元/天 解锁文章
licongmingli
关注
  • 13
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3+Vue AntDesign表格实现自定义列为复选框
glamay的博客
05-24 1190
【代码】vue3+Vue AntDesign表格实现自定义列为复选框。
Ant Design Table组件 控制表头的显示与隐藏
ToBeOrNotToBe_CheerUp的博客
03-13 1万+
需求：当切换时间纬度的时候，表格需要增加某字段。即当统计纬度为时间A时，需要增加X字段，统计纬度为时间B的时候，不需要X字段 思路：根据时间纬度的状态，控制X字段的显示隐藏，从而增强Table组件的可复用性 //我们需求的那个字段columns { title: '字段X', dataIndex: 'xCode', key: 'xCode', filterType: props....
ant-design vue table 可选列、自定义列实现
zhangyuexin24的博客
08-05 7115
实现ant-design for vue 自定义列实现。点击按钮，弹窗显示所有列的checkbox，选择checkbox，确定即可实现自定义列。 先上代码 <script> /** * 该组件为实现table可选列。 * 具体操作见下方注释。 * 全部集成原a-table功能，使用方式与原a-table完全相同，扩展增加了可选列功能 * 该组件已注册至全局，使用方式只需将a-table变为zyx-table即可，等等一系列原写法不变，即可增加该功能. * 采用rander函数模式写，为
关于antd vue 中table的单元格单击或者双击某个编辑事件，配合customCell的用法，可以编辑某一个单元格。
最新发布
m0_73008551的博客
03-11 1136
这里通过单元格点击cellEdit事件的单点事件，触发了cellEdit编辑函数，需要双击修改的可以使用onDblclick事件改为双击。首先看数据格式：这里因为是自己加的行，所以设定了一个随机id，大家可以通过index进行设置key也是可以的。editableDataField：为动态编辑的对象，用来获取某一行，由此确定编辑某一个单元格。contentBeingEdited：为自定义声明的string值，用于获取编辑的是哪一列。需求：动态生成一个单元格，点击生成的某一个单元格可以修改他的text值。
vue Antd(table结合Checkbox)实现可选择动态表头
weixin_50692948的博客
08-29 491
vue Antd(table结合Checkbox)实现可选择动态表头
vue3 antdv 表格 选择项
qq_44792224的博客
05-15 666
【代码】vue3 antdv 表格 选择项。
React antd 表格组件自定义渲染勾选框和全选功能
m0_71630007的博客
04-13 1580
有两列数据要渲染出勾选框，并且右上角有一个全选按钮，其有三种状态，全选，半选，和空状态。
ant + vue3的table表格动态控制是否可选
Hannah_Hannah_的博客
11-10 377
四、根据选择的动态控制每条数据是否可选// 隐藏全选按钮// 选择框功能默认 -- 利用动态改变每条数据的参数来动态控制可选可不选}),// 每次选择完之后调用的函数//增加删除选中后的数据操作}else{//根据已选择的数据条件来动态限制可选可不选****if(record.status == '已开票'){bill_status.value = '已开票'if(item.status == '开票失败'){}else{bill_status.value = '开票失败'
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
vue+iview 实现可编辑表格的示例代码
10-17
主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
基于react的antd组件 复选框，表格默认勾选
outstanding木槿
07-21 569
2.1 调接口成功后，forEach遍历合同台账里的数据，取出每一项存到rowSelect里，还要取出每一项的标识存到rowKey里。2.2 通过reducer定义的setState方法，把rowSelect复制后更新state中定义的selectedRows。2、跳转当前这个页面时，这个页面上的数据是调接口来的。需求: 如合同台账数据，点击按钮打开了当前这个页面，3、勾选几条数据导出pdf就显示几条数据。2.4 点击导出按钮时。选择就导出，一个都没选择 ，不导出。1、初次进入，默认勾选☑️，
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...
Ant Design of Vue 组件库 表格前面加单选框
djsjsjjswj的博客
08-11 558
加在 table 标签中。
vue ant design table中rowSelection属性的应用
aochuntang6606的博客
09-25 3035
1.当table中添加单选框时 <a-table :rowSelection="{type:'radio',onChange:onSelectChange,selectedRowKeys}" ></a-table> 2.点击行时能选中整行的内容 <a-table ...
AntDVue 表格全选反选
weixin_45454281的博客
08-12 2161
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
vue antd table行选中
qq_37899792的博客
10-22 5803
a-table组件中加入以下两个属性 :customRow="rowClick" :rowClassName="rowClassName" /** * @Author: 路博欢 * @Date: 2019/8/22 * @Version: 1.0 * @Last Modified by: 路博欢 * @Last Modified time: 2019/8/22 **/ <comm...
ant design vue 表格单选 选中后其他不可选 接口返回数据
05-18
要实现表格单选，可以使用 `type="radio"` 属性，然后在选中某一行时，遍历整个表格，将其他行的选中状态都设为 false。 下面是一个示例代码： ```vue <template> <a-table :columns="columns" :dataSource="dataSource"> <template slot="name" slot-scope="{text, record}"> <span v-if="!record.disabled">{{ text }}</span> <span v-else style="color: gray">{{ text }}</span> </template> </a-table> </template> <script> export default { data() { return { columns: [ { title: 'Name', dataIndex: 'name', scopedSlots: { customRender: 'name' }, }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ], dataSource: [ { 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', disabled: true, // 表示不可选状态 }, ], selectedRowKeys: [], // 当前选中的行 }; }, methods: { handleRowClick(record) { // 点击行时触发 if (record.disabled) { return; // 如果当前行不可选，直接返回 } const { selectedRowKeys } = this; const index = selectedRowKeys.indexOf(record.key); if (index > -1) { selectedRowKeys.splice(index, 1); // 如果当前行已经选中，则取消选中 } else { selectedRowKeys.splice(0, selectedRowKeys.length, record.key); // 否则将当前行设为选中 } this.dataSource.forEach((item) => { if (item.key !== record.key) { item.disabled = true; // 将其他行的状态设为不可选 } else { item.disabled = false; } }); }, }, }; </script> ``` 这里假设接口返回的数据都是一些基本的表格数据，没有特殊的要求。如果需要更复杂的操作，可以根据实际情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值