位置: IT常识 - 正文

保姆级教程:Ant Design Vue中 a-table 嵌套子表格(保姆级教程什么意思)

编辑:rootadmin
保姆级教程:Ant Design Vue中 a-table 嵌套子表格

推荐整理分享保姆级教程:Ant Design Vue中 a-table 嵌套子表格(保姆级教程什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:保姆级教程起诉健身房,保姆级教程舞蹈,保姆级教程舞蹈,保姆级教程什么意思,保姆级教程分享,保姆级教程分享,保姆级教程分享,保姆级教程什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

前端为Ant Design Vue 版本为1.6.2,使用的是vue2

Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码

内容概述:完成样式及完整代码展示子表格嵌套只打开一个嵌套表格完成样式及完整代码展示保姆级教程:Ant Design Vue中 a-table 嵌套子表格(保姆级教程什么意思)

下图为官网图,会在每行最前面多一个加号,点击后会展开,看到子表格的数据

<template> <div> <a-card> <a-table :columns="columns" :data-source="datasource" :bordered="true" :expandedRowKeys="expandedRowKeys" @expand="getInnerData" :pagination="pagination"> <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata" :pagination="false"></a-table> <span slot="operation" slot-scope="text, record"> <a-button type="primary" icon="unordered-list" @click="getData(record)"> 详情 </a-button> </span> </a-table> </a-card> </div></template><script>import { axios } from '@/utils/request'const columns = [ { title: '序号', dataIndex: 'id', key: 'id', }, 。。。。。中间省略 { title: '操作', key: 'operation', width: '80px', scopedSlots: { customRender: 'operation' }, },];const innerColumns = [ { title: '子表单列', dataIndex: 'XXX', key: 'XXX', },];const inndata = [];export default { data() { return { datasource: [], columns, innerColumns, inndata, expandedRowKeys:[], pagination: { //分页 showSizeChanger: true, //是否分页 curPageSizeIndex: 0, pageSize: 10, //一页显示多少条 // total: 1, //总条数 current: 1, //当前显示页面 pageSizeOptions: ['10', '20', '30'], showTotal: (total) => `共计 ${total}条`, //显示总数 onShowSizeChange: (current, pagesize) => { this.pagination.current = current this.pagination.pageSize = pagesize this.options.offset = (current - 1) * pagesize this.options.limit = pagesize this.refreshData() }, onChange: (current, pageSize) => { this.pagination.current = current this.options.offset = (current - 1) * pageSize this.options.limit = pageSize this.refreshData() }, }, } }, mounted() { this.refreshData() }, methods: { refreshData() { axios({ url: 'url', method: 'post', }).then((res) => { if (res.errCode > 0) { this.$notification.error({ message: '错误信息', description: res.errMsg, }) return } console.log(res, '数据') this.datasource = res }) }, getInnerData(expanded, record) { this.expandedRowKeys=[] if (expanded) { var b = '' b=(record.id-1).toString() this.expandedRowKeys.push(Number(b.slice(-1))) this.inndata = []; this.inndata.push(this.datasource[record.id - 1]) } }, getData(record) { console.log(record); }, },}</script><style scoped></style>子表格嵌套

子格嵌套从代码层简单理解就是一个<a-table></a-table>中套了一个<a-table></a-table>,即<a-table><a-table></a-table></a-table>,当然,这只是一个简单理解,并不是这样写,要在其中添加一些东西。 抛开一些配置项,解释下:

<template> <div> <a-card> // 这里开始是父表格组件,columns -> 父级列名,datasource -> 父级表中的数据, @expand="getInnerData" -> 点开子表单的操作函数,pagination -> 分页的设置 <a-table :columns="columns" :data-source="datasource" @expand="getInnerData" :pagination="pagination"> // 这里开始是子表格组件,slot="expandedRowRender" 重点,必须有,innerColumns-> 子级列名,inndata-> 子级表中的数据, <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata" :pagination="false"></a-table>// 这里是子表格组件结尾 // 这里是父表格span,不用的可以删掉 <span slot="operation" slot-scope="text, record"> <a-button type="primary" icon="unordered-list" @click="getData(record)"> 详情 </a-button> </span> </a-table>// 这里是父表格组件结尾 </a-card> </div></template><script>// 数据请求axios import { axios } from '@/utils/request'// 设置父级列名const columns = [ { title: '序号', dataIndex: 'id', key: 'id', }, 。。。。。中间省略 { title: '操作', key: 'operation', width: '80px', scopedSlots: { customRender: 'operation' }, },];// 设置子级列名const innerColumns = [ { title: '子表单列', dataIndex: 'XXX', key: 'XXX', },];// 设置子级数据,写下面data里也行const inndata = [];export default { data() { return { datasource: [], columns, innerColumns, inndata, pagination: { //分页 showSizeChanger: true, //是否分页 curPageSizeIndex: 0, pageSize: 10, //一页显示多少条 // total: 1, //总条数 current: 1, //当前显示页面 pageSizeOptions: ['10', '20', '30'], showTotal: (total) => `共计 ${total}条`, //显示总数 onShowSizeChange: (current, pagesize) => { this.pagination.current = current this.pagination.pageSize = pagesize this.options.offset = (current - 1) * pagesize this.options.limit = pagesize this.refreshData() }, onChange: (current, pageSize) => { this.pagination.current = current this.options.offset = (current - 1) * pageSize this.options.limit = pageSize this.refreshData() }, }, } }, mounted() { // 进入页面直接运行的函数 this.refreshData() }, methods: { // 异步请求获取数据 refreshData() { axios({ url: 'url', method: 'post', }).then((res) => { if (res.errCode > 0) { this.$notification.error({ message: '错误信息', description: res.errMsg, }) return } console.log(res, '数据') // 将数据赋值给父级表格 this.datasource = res }) }, // 点开子级表格(就是点击那个加号)触发的函数 getInnerData(expanded, record) { // 判断是否点开 if (expanded) { // 点开后执行。。。 // 先将子级表格数据清空,否则之前点开别的行的数据也会在里面 this.inndata = []; // 再将父级点击的那一行的数据(record)给子级数据存进去,具体情况根据自己需求更改 this.inndata.push(record) } },// 点击父级表格表格span,也就是那个“详情”按钮触发的函数 getData(record) { console.log(record); }, },}</script><style scoped></style>

通过上述操作会发现能够实现基本的子表格嵌套,但是会发现点开一个子表单后,再点一个,两个都会打开,但是里面的子表格数据是相同的,这就是个很大的问题,为了解决这个问题,请看下面,这个在官网没直接写出来,API里有相关的参数,现在告诉你应该怎样操作

只打开一个嵌套表格

为了防止点开多个子表格内容相同,再结合我自己的使用场景,我只需要展开一个子表格就行,也就是说点开新的子表格后,原来的子表格自动关闭 下面把需要改动的代码片段给你们: 1. 父级中的修改内容

// 添加 :expandedRowKeys="expandedRowKeys" 目的是使expandedRowKeys只有最新点开子表单的key<a-table :columns="columns" :data-source="datasource" :bordered="true" :expandedRowKeys="expandedRowKeys" @expand="getInnerData" :pagination="pagination"> <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata" :pagination="false"></a-table> <span slot="operation" slot-scope="text, record"> <a-button type="primary" icon="unordered-list" @click="getData(record)"> 详情 </a-button> </span> </a-table>

2. 在data里加上空的 expandedRowKeys

export default { data() { return { datasource: [], columns, innerColumns, inndata, // 添加空的expandedRowKeys expandedRowKeys:[], 。。。。。。

3. 修改getInnerData函数

getInnerData(expanded, record) { // 先将expandedRowKeys数据清空 this.expandedRowKeys=[] if (expanded) { // 将父级的第几条数据传到expandedRowKeys里,我这用的是数据表里的id处理的,我的id是从1开始 // 我这是一页十条数据,要放入0-9,第一条是0,第十条是9,一定要是数字格式 // 再一个,注意下,假设使用的是数据中的第45条,record.id=45 // 但是传入 expandedRowKeys 只能是0-9,且是数字格式,那么应该将数字4传到expandedRowKeys中 // 因为record.id=45这条数据,在表格中的第五行,应该是4 // 所以有了下面的record.id-1,再转成字符串格式,取最后一位,再转成数字 // 也有人用key,id能够获取到,不过我没弄成功,就这样吧,实现功能就行 var b=(record.id-1).toString() this.expandedRowKeys.push(Number(b.slice(-1))) // 下面两行说过,我就把注释直接粘过来了 // 先将子级表格数据清空,否则之前点开别的行的数据也会在里面 this.inndata = []; // 再将父级点击的那一行的数据(record)给子级数据存进去,具体情况根据自己需求更改 this.inndata.push(record) } },
本文链接地址:https://www.jiuchutong.com/zhishi/298673.html 转载请保留说明!

上一篇:openCV实践项目:拖拽虚拟方块(opencv项目开发实战)

下一篇:在vue中使用echarts(vue中用echarts)

  • 苹果13pro专注模式怎么关闭(苹果13pro专注模式怎么设置)

    苹果13pro专注模式怎么关闭(苹果13pro专注模式怎么设置)

  • 魅族17有无线充电功能吗(魅族17无线充电怎么设置)

    魅族17有无线充电功能吗(魅族17无线充电怎么设置)

  • 华为nova5pro微信视频怎么开美颜(华为nova5pro微信消息不显示内容)

    华为nova5pro微信视频怎么开美颜(华为nova5pro微信消息不显示内容)

  • 苹果11玩游戏没有声音怎么回事(苹果11玩游戏没有声音怎么设置)

    苹果11玩游戏没有声音怎么回事(苹果11玩游戏没有声音怎么设置)

  • 32位系统安装哪个pr(装32位系统的好处)

    32位系统安装哪个pr(装32位系统的好处)

  • 拼多多有事能暂停店铺吗(拼多多不能主动取消订单吗)

    拼多多有事能暂停店铺吗(拼多多不能主动取消订单吗)

  • 5g手机终端支持GSM吗(5g支持的手机)

    5g手机终端支持GSM吗(5g支持的手机)

  • 华为畅享6s怎么分屏(华为畅享6s怎么恢复出厂设置)

    华为畅享6s怎么分屏(华为畅享6s怎么恢复出厂设置)

  • 为什么手机充电特别慢(为什么手机充电一直保持同一电量)

    为什么手机充电特别慢(为什么手机充电一直保持同一电量)

  • 网盘会员到期文件会消失吗(网盘会员到期文件能打开吗)

    网盘会员到期文件会消失吗(网盘会员到期文件能打开吗)

  • 抖音上猜歌唱歌的软件叫什么(抖音上猜歌赚钱的是真的吗)

    抖音上猜歌唱歌的软件叫什么(抖音上猜歌赚钱的是真的吗)

  • 小米mix2s支持闪充吗(小米mix2s两个闪电)

    小米mix2s支持闪充吗(小米mix2s两个闪电)

  • 打印机不工作是什么原因(打印机不工作是墨盒的原因吗?)

    打印机不工作是什么原因(打印机不工作是墨盒的原因吗?)

  • 极米怎么退出音响模式(极米怎么退出音乐模式)

    极米怎么退出音响模式(极米怎么退出音乐模式)

  • idc提供哪些服务(idc提供哪些服务和服务)

    idc提供哪些服务(idc提供哪些服务和服务)

  • 华为桌面圆圈怎么取消(华为桌面圆圈怎么弄掉?)

    华为桌面圆圈怎么取消(华为桌面圆圈怎么弄掉?)

  • 油表怎么看没油(宝马车油表怎么看没油)

    油表怎么看没油(宝马车油表怎么看没油)

  • 微信界面出现matrix怎么去掉(微信界面出现一个标志删不掉)

    微信界面出现matrix怎么去掉(微信界面出现一个标志删不掉)

  • 华为p30pro几寸(华为P30Pro几寸)

    华为p30pro几寸(华为P30Pro几寸)

  • 酷狗音乐扫一扫在哪里(酷狗音乐扫一扫二维码)

    酷狗音乐扫一扫在哪里(酷狗音乐扫一扫二维码)

  • 小米有品和有品有鱼的区别(小米有品有品头条出现条件)

    小米有品和有品有鱼的区别(小米有品有品头条出现条件)

  • airpods如何重新配对(airpods如何重新绑定icloud)

    airpods如何重新配对(airpods如何重新绑定icloud)

  • 无线路由器桥接设置(无线路由器桥接后插网线可以上网吗)

    无线路由器桥接设置(无线路由器桥接后插网线可以上网吗)

  • 京东如何删掉默认地址(京东如何删掉默认收货)

    京东如何删掉默认地址(京东如何删掉默认收货)

  • 游戏手柄怎么连接电视(游戏手柄怎么连接手机)

    游戏手柄怎么连接电视(游戏手柄怎么连接手机)

  • Android 设置Padding和Margin(动态/静态)(android 设置按钮颜色)

    Android 设置Padding和Margin(动态/静态)(android 设置按钮颜色)

  • 电脑运行慢该怎么解决呢?(电脑运行慢怎么清理c盘)

    电脑运行慢该怎么解决呢?(电脑运行慢怎么清理c盘)

  • 接受固定资产投资的增值税计入哪里
  • 企业名称税号
  • 中外合资企业要交什么税
  • 发票丢失的税务处罚
  • 报销金额大于发票金额几毛钱
  • 个税隔一个月没申报这个月可以补上吗
  • 微企怎么申请补贴
  • 转让折旧怎么算
  • 承租人转租是否要交税
  • 给非企业员工佣金怎么交税
  • 贴现票据种类
  • 增值税专用发票和普通发票的区别
  • 公司账户境外汇款
  • &quot;明股实债“的税务风险,你真的清楚吗?
  • 记账凭证汇总表和汇总记账凭证有什么区别
  • 公司购买床垫怎样入账
  • 按揭的车可以只买交强险吗
  • 企业为开发新产品新技术新工艺
  • 安装win7的步骤
  • win10任务栏快捷图标不见了
  • php二维数组添加数据
  • 提供劳务收入怎么交税
  • 高新企业政府补贴政策
  • 购入无形资产的增值税税率
  • 预缴企业所得税分录
  • 在清算土地增值税销项时,允许扣除的土地价款包括哪些?
  • ajax调用php接口
  • linux安装cuda的正确姿势
  • 服务业销售收入
  • 结转已销产品计入什么科目
  • 施工图审查费属于什么费用类别
  • 手机充值如何开公司发票
  • wordpress!
  • 边际贡献总额计算公式边际贡献率
  • 公司给部分员工长期停工怎么办
  • 企业向个人借款协议范本
  • 支付债券发行费怎么算
  • 购入不动产进项税额怎么抵扣
  • sql server操作教程
  • Win2003系统下SQL Server 2008安装图解教程(详细图解)
  • 收到现金货款会计分录
  • 外贸公司出口退税流程
  • 金蝶财务软件怎么冲销费用
  • 销项税额专栏记录企业销售货物
  • 长期股权投资稀释股权的两种
  • 中级财务会计计算题
  • 付设备款的会计分录
  • 外购材料用于建筑工程会计分录
  • 纳税人延期缴纳税款
  • 行政事业单位能报销瓶装水吗
  • windows server2008系统弹出今天必须修改密码该怎么处理?
  • centos7+
  • dos下如何安装win7
  • windows任务管理器怎么打开
  • 索尼笔记本电脑怎么进入bios设置
  • win7系统自带刻录启用
  • win10一年更新一次
  • win7系统无法进入登录界面
  • win8系统文件
  • javascript 基础
  • node管理工具
  • 批处理命令在哪个菜单中
  • 批处理删除注册表指定项
  • 详细分析我国针对疫情的国防动员举措
  • js按位运算符
  • android app 框架
  • android Lollipop(5.0)--touch feedback(触摸反馈)
  • arp欺骗防范方法
  • jquery使用jsonp
  • unity3d游戏开发笔记本推荐
  • jQuery ajax提交Form表单实例(附demo源码)
  • jquery聚焦输入框
  • unity最新教程
  • python3 functools
  • 买药开税票多少税率
  • 拼多多发票哪里申请开票
  • 山东省税务局网站首页
  • 仓储物流用地属于商业用地吗
  • 区地税局会不会分到乡镇
  • 预付建造固定资产的工程价款
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设