位置: 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)

  • 淘宝店推广和营销方法总结(淘宝店推广和营销的区别)

    淘宝店推广和营销方法总结(淘宝店推广和营销的区别)

  • 苹果手机发热发烫是什么原因(苹果手机发热发烫是什么原因)(苹果手机发热发烫是什么原因怎么办)

    苹果手机发热发烫是什么原因(苹果手机发热发烫是什么原因)(苹果手机发热发烫是什么原因怎么办)

  • vivox系列有几款(vivos16的优缺点)

    vivox系列有几款(vivos16的优缺点)

  • 快手订单删除了怎么恢复(快手订单删除了还能退款吗)

    快手订单删除了怎么恢复(快手订单删除了还能退款吗)

  • 取消公众号对方知道吗(公众号取消后个人信息回会被注销吗)

    取消公众号对方知道吗(公众号取消后个人信息回会被注销吗)

  • 天猫自动确认收货规则(天猫自动确认收货是几天)

    天猫自动确认收货规则(天猫自动确认收货是几天)

  • 华为相册删除照片里清空了能恢复吗(华为相册删除照片删不掉)

    华为相册删除照片里清空了能恢复吗(华为相册删除照片删不掉)

  • 复制到剪贴板怎么找(复制到剪贴板怎么粘贴)

    复制到剪贴板怎么找(复制到剪贴板怎么粘贴)

  • 京东学生认证会毕业自动取消吗(京东学生认证会有什么影响吗)

    京东学生认证会毕业自动取消吗(京东学生认证会有什么影响吗)

  • 小米手环不连接手机能用吗(小米手环不连接手机怎么调时间)

    小米手环不连接手机能用吗(小米手环不连接手机怎么调时间)

  • 苹果8plus是双卡吗(苹果8plus是双卡槽吗)

    苹果8plus是双卡吗(苹果8plus是双卡槽吗)

  • ip68级防水水下几米(防水ip68可以下水多深)

    ip68级防水水下几米(防水ip68可以下水多深)

  • 怎么查收邮件(电子邮件怎么弄)

    怎么查收邮件(电子邮件怎么弄)

  • 手机qq音乐怎么改密码(手机qq音乐怎么转换mp3格式)

    手机qq音乐怎么改密码(手机qq音乐怎么转换mp3格式)

  • 路由器ipv6有什么用(路由器ipv6有什么用,怎么查看是否支持)

    路由器ipv6有什么用(路由器ipv6有什么用,怎么查看是否支持)

  • 淘宝联合登录怎么解除(淘宝联合登录怎么关闭)

    淘宝联合登录怎么解除(淘宝联合登录怎么关闭)

  • 如何找到自己的私密视频(如何找到自己的优势和天赋)

    如何找到自己的私密视频(如何找到自己的优势和天赋)

  • vivox27pro有没有红外线功能(vivox27pro有没有红外线遥控)

    vivox27pro有没有红外线功能(vivox27pro有没有红外线遥控)

  • 苹果微博相机权限怎么设置(苹果微博相机权限怎么开)

    苹果微博相机权限怎么设置(苹果微博相机权限怎么开)

  • vivoz3i闪充在哪设置(vivoz3闪充和慢充的标志)

    vivoz3i闪充在哪设置(vivoz3闪充和慢充的标志)

  • 公交车用手机怎么支付(公交车用手机怎么交费)

    公交车用手机怎么支付(公交车用手机怎么交费)

  • 如何修改电脑默认用户名Administrator?(如何修改电脑默认打印机)

    如何修改电脑默认用户名Administrator?(如何修改电脑默认打印机)

  • 免抵退税办法不得抵扣的进项税额
  • 2023年小规模物业公司物业费税率
  • 为什么增值税不计入营业税金及附加
  • 进项税额比销项税额大怎么办
  • 作废的发票验旧之后怎么领取新发票
  • 框架合同有合同金额吗
  • 分公司可以享受小规模纳税人优惠
  • 坏账准备递延所得税资产怎么算
  • 核定征收企业有哪些
  • 普通发票作废怎么验旧
  • 来料加工与进料加工的相似之处有
  • 企业收到个体户开的发票
  • 管理费用已付款未收到发票
  • 事业单位开展活动的意义
  • 加油站销售加油卡是否征收增值税
  • 专项应付款转资本公积
  • 软件开发服务费税率
  • 特许权使用费如何确认收入
  • 公司委托其他公司代缴社保合法吗
  • 企业所得所得税税负
  • 一般纳税人的工资可以抵扣吗
  • 餐饮发票税钱
  • 实收资本记错账如何调整账面价值
  • 免抵退税申报汇总表下载
  • 建筑服务预交税款怎么计算的
  • 房租付款和发票有关系吗
  • 应收账款零头没有收到如何账务处理
  • windows右键刷新总是卡住
  • 最终控制方合并报表账面价值
  • thinkphp获取数据库数据
  • php和数据库
  • 一般纳税人普通发票怎么交税
  • owmngr.exe - owmngr是什么进程 作用是什么
  • 出口零退税率商品有哪些
  • 将债务转为资本的,债务人应当将债权人
  • 基于什么意思
  • php生成随机字母数字代码
  • vue使用计算属性
  • pytorch基础教程
  • thinkphp update方法
  • php使用正则表达式提取abcdef
  • js框架jquery
  • 宝塔主机分销系统设计
  • 销售费用工资明细科目
  • 无偿转让股权印花税计税金额
  • 残疾人保障金计入哪个会计科目
  • php环境配置教程
  • 个体户增值税减免申报明细表怎么填
  • 每月随工资发放的房补,本月至今未发
  • 农产品来源用途是什么
  • Sql Server中Substring函数的用法实例解析
  • 建筑业的人工费是什么
  • 暂估入账应该如何操作
  • 以货物抵债的会计分录
  • 工资发多了可以追回吗
  • 销售商品成本核算
  • 分期付款购车需要什么
  • 应交所得税如何调整
  • 收到退回的企业所得税如何做账
  • 小规模纳税人怎么开增值税专用发票
  • 销售免税货物的会计分录
  • 单位给员工购买公积金流程
  • 总分类账户与明细分类账户是对账户按照其
  • 销售废旧物资是否缴税 如何账务处理
  • explorer.exe进程出错
  • macos 复制快捷键
  • 复制打开网页
  • linux ssh默认端口
  • linux中如何修改文件内容
  • extend列表
  • windows和linux的区别
  • 如何实现左侧固定,右侧自适应的布局
  • python开发技术详解(全27集),5
  • Unity3D游戏开发(第2版)
  • vue父向子传方法
  • javascript怎么用
  • jquery中可以用什么方法来获取和设置元素属性
  • jquery.js插件
  • 深圳全电子发票开具流程
  • 一般纳税人每月开票金额有限额吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设