ant design vue 表格Table使用
ant design vue 表格Table使用
1.嵌套子表
<a-table rowKey="arcId" :columns="columns" :dataSource="loadData" @expand="handldOnExpand" :loading="tableLoading" > <span slot="action" slot-scope="text, record"> <a v-if="record.status !=0" @click="getarcListByStaus(record)">填表归档</a> <a-divider v-if="record.status !=0" type="vertical" /> <a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a> <a v-else @click="updateByStaus(record.arcId)">取消归档</a> </span> // 子表格 <a-table slot="expandedRowRender" slot-scope="record,text" :columns="innerColumns" :data-source="record.newchildren" :pagination="false" // 不显示表头 :showHeader="false" > <span slot="operation" slot-scope="text,record"> <a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a> <a v-else @click="updateByStaus(record.arcId)">取消归档</a> </span> </a-table> </a-table> // 展开闭合按钮事件 handldOnExpand(expanded, record) { console.log(expanded,record); if (!expanded) return //如果是关闭就返回 if (record.children && record.children.length > 0) return //如果已经有数据就返回 const id = record.arcId // 获取当前行下的子表数据 getArcList(Object.assign({ parentid: id })).then((res) => { // console.log("aaaaaaaaa"); const children = res.rows || [] this.loadData.forEach(item =>{ if(item.arcId === id){ // 将子表数据存放到父项的newchildren对象中 item.newchildren=children // console.log(item.children); this.loadData = [...this.loadData] }}) }) },
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 2.给表格加上loading<a-table rowKey="arcId" :columns="columns" :dataSource="loadData" @expand="handldOnExpand" :loading="tableLoading" > </a-table> this.tableLoading = true //结束 this.tableLoading = false 12345678910111213 3.某一列排序
// 表头设置 { title: '项目编号', dataIndex: 'number', align: 'center', sorter: (a, b) => a.number.localeCompare(b.number), }, 1234567
相关知识
ant design vue 表格Table使用
基于SpringBoot + Vue的宠物医院管理系统
2017（CGDA）国际标志设计奖（CGDA2017 International Logo Design Award）及获奖公示
【毕设精选】基于SpringBoot和Vue的相关系统
技术驱动宠物健康：宠物在线问诊系统的高效搭建手册
2020意大利A' Design Award设计奖获奖作品（宠物类）
高爷家 宠物品牌设计 - design by DXD设计工作室
COCOYO扬爪 宠物品牌设计 design by｛KEY｝上海奎燕
警犬训练方法（表格模板范文）
萌士多宠物品牌设计，趣味个性的风格！ design by：BUFF品牌视觉
网址: ant design vue 表格Table使用 https://m.mcbbbk.com/newsview250512.html
| 上一篇: 整治住宅小区违规行为专项行动实施 |
下一篇: 计划的改变 |
