使用arco design实现动态列信息的表格

目录

1.说明

2.普通表格的实现

3.动态表格的实现

---

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: '[e-mail]'}, {key: '2',name: 'Alisa Ross',salary: 25000,address: '35 Park Road, London',email: '[e-mail]'}, {key: '3',name: 'Kevin Sandra',salary: 22000,address: '31 Park Road, London',email: '[e-mail]'}, {key: '4',name: 'Ed Hellen',salary: 17000,address: '42 Park Road, London',email: '[e-mail]'}, {key: '5',name: 'William Smith',salary: 27000,address: '62 Park Road, London',email: '[e-mail]'}]);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.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集合接收查询结果，如下：

   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>

 前端列信息，也可以使用插槽的方式进行自定义，循环列信息，根据不同的列类型，可以使用输入框或者下拉选择器进行显示。