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

目录

1.说明

2.普通表格的实现

3.动态表格的实现


1.说明

在前端画面中,表格一般用来展示列表数据,并且可以实现分页,应用很广泛,关于表格的列信息,一般是固定的,也可以是变化的,根据后端传递的数据及列信息进行动态展示,本文使用的是arco design前端框架,大家可以参考一下

2.普通表格的实现

arco design中表格的基本用法:需要传递 columnsdata

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>

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

相关推荐
RationalDysaniaer19 天前
Umi UI报错:连接失败,请尝试重启dev服务
arco design·anti-design-vue
刘大逵3 个月前
Arco Design,字节跳动出品的UI库
ui·arco design
疾风终究没有归途3 个月前
Arco Design:引领未来的Vue 3创意先锋,一键开启高效与美感并重的Web开发之旅!
前端·前端框架·vue·arco design
FLK_90903 个月前
Vue3 的福音框架:Arco Design
arco design
素味平生3 个月前
Arco Design 之Table表格
前端·arco design
linab1126 个月前
vue3+arco design通过动态表单方式实现自定义筛选
前端·javascript·arco design
GodCodeApps7 个月前
Arco design 发布到生成环境F5刷新报错404
arco design
o__A_A7 个月前
@arco.design radioGroup 组件手写 beforeChange 方法
arco design
lsswear8 个月前
前端框架推荐 Arco Design
ui·前端框架·arco design