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

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: '[email protected]'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: '[email protected]'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: '[email protected]'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: '[email protected]'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: '[email protected]'
    }]);

    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>

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