目錄

1.說明

2.普通表格的實(shí)現(xiàn)

3.動(dòng)態(tài)表格的實(shí)現(xiàn)

---

1.說明

在前端畫面中，表格一般用來展示列表數(shù)據(jù)，并且可以實(shí)現(xiàn)分頁，應(yīng)用很廣泛，關(guān)于表格的列信息，一般是固定的，也可以是變化的，根據(jù)后端傳遞的數(shù)據(jù)及列信息進(jìn)行動(dòng)態(tài)展示，本文使用的是arco design前端框架，大家可以參考一下

2.普通表格的實(shí)現(xiàn)

arco design中表格的基本用法：需要傳遞 columns 和 data。

data是要展示的列表信息，columns是要展示的列信息。當(dāng)顯示的列信息是固定時(shí)，可以在畫面中定義列信息數(shù)組，在數(shù)組中的對(duì)象中可以設(shè)置列的標(biāo)題(title)，列和data中的對(duì)應(yīng)關(guān)系(dataIndex)，會(huì)將dataIndex中的內(nèi)容和data中對(duì)象的key進(jìn)行匹配，一致時(shí)則顯示數(shù)據(jù)，還是設(shè)置列寬，插槽名等。

<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.動(dòng)態(tài)表格的實(shí)現(xiàn)

動(dòng)態(tài)列表的實(shí)現(xiàn)也比較簡單，只需要從后端設(shè)置好data和columns的內(nèi)容，前端獲取到信息后，將對(duì)應(yīng)的信息設(shè)置到data及columns中進(jìn)行顯示。

例如用戶有自定義顯示列信息的需要。

實(shí)現(xiàn)方式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：

獲取后端返回的列信息，添加序號(hào)及操作列。將后端返回的數(shù)據(jù)直接設(shè)置給表格關(guān)聯(lián)的數(shù)據(jù)

    const res = await getNurseryFbk(reqbody)// 后端返回的列信息colData.value = res.column// 表格中的列信息，多了序號(hào)及操作列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：后端首先獲取要顯示的列信息，根據(jù)列信息拼接查詢sql，我使用map集合接收查詢結(jié)果，如下：

   List<Map<String, Object>> getList(@Param("sql") String sql);

注意使用map集合接收數(shù)據(jù)時(shí)map的key是表中字段的id，最好在拼接sql語句時(shí)將查詢語句中的表中的字段全部統(tǒng)一為小寫。

columns：列集合中的每條數(shù)據(jù)為要顯示的列信息，比如titile的設(shè)置，dataIndex的設(shè)置（需要設(shè)置為表中字段的小寫，和data中key一致），列寬的設(shè)置，插槽名的設(shè)置等等。

這樣就可以完成數(shù)據(jù)的動(dòng)態(tài)展示

注意：dataIndex的內(nèi)容不能為空，為空時(shí)表格渲染會(huì)出現(xiàn)問題

實(shí)現(xiàn)方式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="確定進(jìn)行刪除嗎?" @ok="delInfo(record)"><a-button size="small" status="warning">刪除</a-button></a-popconfirm></a-space></div></template></a-table-column></template></a-table>

?前端列信息，也可以使用插槽的方式進(jìn)行自定義，循環(huán)列信息，根據(jù)不同的列類型，可以使用輸入框或者下拉選擇器進(jìn)行顯示。