目录
1.说明
在前端画面中,表格一般用来展示列表数据,并且可以实现分页,应用很广泛,关于表格的列信息,一般是固定的,也可以是变化的,根据后端传递的数据及列信息进行动态展示,本文使用的是arco design前端框架,大家可以参考一下
2.普通表格的实现
arco design中表格的基本用法:需要传递 columns
和 data
。
data是要展示的列表信息,columns是要展示的列信息。当显示的列信息是固定时,可以在画面中定义列信息数组,在数组中的对象中可以设置列的标题(title),列和data中的对应关系(dataIndex),会将dataIndex中的内容和data中对象的key进行匹配,一致时则显示数据,还是设置列宽,插槽名等。
<template>
<a-table :columns="columns" :data="data" />
</template>
<script>
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.doe@example.com'
}, {
key: '2',
name: 'Alisa Ross',
salary: 25000,
address: '35 Park Road, London',
email: 'alisa.ross@example.com'
}, {
key: '3',
name: 'Kevin Sandra',
salary: 22000,
address: '31 Park Road, London',
email: 'kevin.sandra@example.com'
}, {
key: '4',
name: 'Ed Hellen',
salary: 17000,
address: '42 Park Road, London',
email: 'ed.hellen@example.com'
}, {
key: '5',
name: 'William Smith',
salary: 27000,
address: '62 Park Road, London',
email: 'william.smith@example.com'
}]);
return {
columns,
data
}
},
}
</script>
3.动态表格的实现
动态列表的实现也比较简单,只需要从后端设置好data和columns的内容,前端获取到信息后,将对应的信息设置到data及columns中进行显示。
例如用户有自定义显示列信息的需要。
实现方式1
前端:
template
<a-table :data="tableData" style="margin-top: 10px" :columns="tableCol"
row-key="id" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
:loading="loading"
:virtual-list-props="{height:600}"
:scroll="{x:2000}"
:pagination="false"
>
<template #index="{ rowIndex }">
{{ rowIndex + 1 }}
</template>
<template #operations="{ record }">
<a-space :size="5">
<a-button size="small" @click="edit(record)" status="success" v-if="openType == '2002'">
修改
</a-button>
</a-space>
</template>
</a-table>
js:
获取后端返回的列信息,添加序号及操作列。将后端返回的数据直接设置给表格关联的数据
const res = await getNurseryFbk(reqbody)
// 后端返回的列信息
colData.value = res.column
// 表格中的列信息,多了序号及操作列
tableCol.value = res.column
tableCol.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集合接收查询结果,如下:
List<Map<String, Object>> getList(@Param("sql") String sql);
注意使用map集合接收数据时map的key是表中字段的id,最好在拼接sql语句时将查询语句中的表中的字段全部统一为小写。
columns:列集合中的每条数据为要显示的列信息,比如titile的设置,dataIndex的设置(需要设置为表中字段的小写,和data中key一致),列宽的设置,插槽名的设置等等。
这样就可以完成数据的动态展示
注意:dataIndex的内容不能为空,为空时表格渲染会出现问题
实现方式2
<a-table :data="tableData" style="margin-top: 10px"
row-key="id" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
:scroll="{y:500}"
:loading="loading"
:pagination="{
current: pagination.offset,
pageSize: pagination.limit,
total: pagination.total,
showTotal: true,
showJumper: true,
showPageSize: true,
pageSizeOptions:[5000,10000,15000,20000,25000,30000]}"
@page-change="onPageChange"
@page-size-change="onPageSizeChange"
>
<template #columns>
<a-table-column :title="item.title" v-for="(item,index) in tableCol" :key="index" :width="item.width"
:fixed="item.fixed" :tooltip="item.tooltip" :ellipsis="item.ellipsis">
<template #cell="{record, rowIndex}">
<div v-if="item.title == 'No'">
{{ rowIndex + 1 + (pagination.offset - 1) * pagination.limit }}
</div>
<div v-if="item.colType == '2'">
<a-select v-model="record[item.dataIndex]" :disabled="true">
<a-option v-for="optionItem of item.colList" :value="optionItem.valueId"
:label="optionItem.listValue"></a-option>
</a-select>
</div>
<div v-if="item.colType != '2'">
{{ record[item.dataIndex] }}
</div>
<div v-if="item.title == 'Optional'">
<a-space>
<a-button size="small" @click="edit(record)" status="success">
修改
</a-button>
<a-popconfirm content="确定进行删除吗?" @ok="delInfo(record)">
<a-button size="small" status="warning">
删除
</a-button>
</a-popconfirm>
</a-space>
</div>
</template>
</a-table-column>
</template>
</a-table>
前端列信息,也可以使用插槽的方式进行自定义,循环列信息,根据不同的列类型,可以使用输入框或者下拉选择器进行显示。