网站备案的重要性,网络服务器配置与管理试题,产品推广策划方案,个人微信小程序怎么开通目录 1.说明
2.普通表格的实现
3.动态表格的实现 1.说明
在前端画面中#xff0c;表格一般用来展示列表数据#xff0c;并且可以实现分页#xff0c;应用很广泛#xff0c;关于表格的列信息#xff0c;一般是固定的#xff0c;也可以是变化的#xff0c;根据后端传递…目录 1.说明
2.普通表格的实现
3.动态表格的实现 1.说明
在前端画面中表格一般用来展示列表数据并且可以实现分页应用很广泛关于表格的列信息一般是固定的也可以是变化的根据后端传递的数据及列信息进行动态展示本文使用的是arco design前端框架大家可以参考一下
2.普通表格的实现
arco design中表格的基本用法需要传递 columns 和 data。
data是要展示的列表信息columns是要展示的列信息。当显示的列信息是固定时可以在画面中定义列信息数组在数组中的对象中可以设置列的标题(title)列和data中的对应关系(dataIndex)会将dataIndex中的内容和data中对象的key进行匹配一致时则显示数据还是设置列宽插槽名等。
templatea-table :columnscolumns :datadata /
/templatescript
import { reactive } from vue;export default {setup() {const columns [{title: Name,dataIndex: name,},{title: Salary,dataIndex: salary,},{title: Address,dataIndex: address,},{title: Email,dataIndex: email,},];const data reactive([{key: 1,name: Jane Doe,salary: 23000,address: 32 Park Road, London,email: jane.doeexample.com}, {key: 2,name: Alisa Ross,salary: 25000,address: 35 Park Road, London,email: alisa.rossexample.com}, {key: 3,name: Kevin Sandra,salary: 22000,address: 31 Park Road, London,email: kevin.sandraexample.com}, {key: 4,name: Ed Hellen,salary: 17000,address: 42 Park Road, London,email: ed.hellenexample.com}, {key: 5,name: William Smith,salary: 27000,address: 62 Park Road, London,email: william.smithexample.com}]);return {columns,data}},
}
/script3.动态表格的实现
动态列表的实现也比较简单只需要从后端设置好data和columns的内容前端获取到信息后将对应的信息设置到data及columns中进行显示。
例如用户有自定义显示列信息的需要。
实现方式1
前端
template a-table :datatableData stylemargin-top: 10px :columnstableColrow-keyid :row-selectionrowSelection v-model:selectedKeysselectedKeys:loadingloading:virtual-list-props{height:600}:scroll{x:2000}:paginationfalsetemplate #index{ rowIndex }{{ rowIndex 1 }}/templatetemplate #operations{ record }a-space :size5a-button sizesmall clickedit(record) statussuccess v-ifopenType 2002修改/a-button/a-space/template/a-table
js
获取后端返回的列信息添加序号及操作列。将后端返回的数据直接设置给表格关联的数据 const res await getNurseryFbk(reqbody)// 后端返回的列信息colData.value res.column// 表格中的列信息多了序号及操作列tableCol.value res.columntableCol.value.unshift({title: No,dataIndex: no,colType: ,colList: [],fixed: left,slotName: index,width: 100})tableCol.value.push({title: Optional,dataIndex: optional,colType: ,colList: [],slotName: operations,width: 200})tableData.value res.data
后端
data后端首先获取要显示的列信息根据列信息拼接查询sql我使用map集合接收查询结果如下 ListMapString, Object getList(Param(sql) String sql);
注意使用map集合接收数据时map的key是表中字段的id最好在拼接sql语句时将查询语句中的表中的字段全部统一为小写。
columns列集合中的每条数据为要显示的列信息比如titile的设置dataIndex的设置需要设置为表中字段的小写和data中key一致列宽的设置插槽名的设置等等。
这样就可以完成数据的动态展示
注意dataIndex的内容不能为空为空时表格渲染会出现问题
实现方式2 a-table :datatableData stylemargin-top: 10pxrow-keyid :row-selectionrowSelection v-model:selectedKeysselectedKeys:scroll{y:500}:loadingloading:pagination{current: pagination.offset,pageSize: pagination.limit,total: pagination.total,showTotal: true,showJumper: true,showPageSize: true,pageSizeOptions:[5000,10000,15000,20000,25000,30000]}page-changeonPageChangepage-size-changeonPageSizeChangetemplate #columnsa-table-column :titleitem.title v-for(item,index) in tableCol :keyindex :widthitem.width:fixeditem.fixed :tooltipitem.tooltip :ellipsisitem.ellipsistemplate #cell{record, rowIndex}div v-ifitem.title No{{ rowIndex 1 (pagination.offset - 1) * pagination.limit }}/divdiv v-ifitem.colType 2a-select v-modelrecord[item.dataIndex] :disabledtruea-option v-foroptionItem of item.colList :valueoptionItem.valueId:labeloptionItem.listValue/a-option/a-select/divdiv v-ifitem.colType ! 2{{ record[item.dataIndex] }}/divdiv v-ifitem.title Optionala-spacea-button sizesmall clickedit(record) statussuccess修改/a-buttona-popconfirm content确定进行删除吗? okdelInfo(record)a-button sizesmall statuswarning删除/a-button/a-popconfirm/a-space/div/template/a-table-column/template/a-table 前端列信息也可以使用插槽的方式进行自定义循环列信息根据不同的列类型可以使用输入框或者下拉选择器进行显示。
