剖析amis组件之表格视图，让您轻松开发复杂表结构

2023-11-19 15:03:28

amis组件之表格视图配置解析（二）

大家好，我是热爱技术分享的技术博客达人。今天，我将继续为您带来amis组件系列文章的第二篇——表格视图配置介绍。在上一篇文章中，我们已经对表格视图的基本概念和配置项进行了介绍。在这篇文章中，我们将深入剖析表格视图的更多配置项，帮助您轻松搭建复杂表结构，助力高效开发。

一、表格视图配置项详解

trs：

trs用于定义表格的行数据。它是一个数组，每个元素代表一行数据。每一行数据可以是一个对象，也可以是一个数组。如果是一行数据是一个对象，则该对象中的键值对表示该行数据的各个字段。如果是一行数据是一个数组，则该数组中的每个元素表示该行数据的某个字段。
header：

header用于定义表格的表头。它是一个数组，每个元素代表一个表头列。表头列可以是一个对象，也可以是一个字符串。如果是一个对象，则该对象中的键值对表示该表头列的各个属性。如果是一个字符串，则该字符串表示该表头列的标题。
body：

body用于定义表格的主体。它是一个数组，每个元素代表一行数据。每一行数据可以是一个对象，也可以是一个数组。如果是一行数据是一个对象，则该对象中的键值对表示该行数据的各个字段。如果是一行数据是一个数组，则该数组中的每个元素表示该行数据的某个字段。
footer：

footer用于定义表格的页脚。它是一个数组，每个元素代表一行数据。每一行数据可以是一个对象，也可以是一个数组。如果是一行数据是一个对象，则该对象中的键值对表示该行数据的各个字段。如果是一行数据是一个数组，则该数组中的每个元素表示该行数据的某个字段。

二、表格视图案例分析

为了帮助您更好地理解表格视图的配置，我们来看一个具体的案例。我们假设我们要创建一个表格视图，用于展示学生成绩信息。该表格视图需要包含以下字段：姓名、学号、语文成绩、数学成绩、英语成绩、总分。

{
  "type": "table",
  "trs": [
    {
      "name": "张三",
      "student_id": "1001",
      "chinese": 90,
      "math": 95,
      "english": 85,
      "total": 370
    },
    {
      "name": "李四",
      "student_id": "1002",
      "chinese": 80,
      "math": 90,
      "english": 75,
      "total": 345
    },
    {
      "name": "王五",
      "student_id": "1003",
      "chinese": 70,
      "math": 85,
      "english": 80,
      "total": 335
    }
  ],
  "header": [
    {
      "name": "姓名"
    },
    {
      "name": "学号"
    },
    {
      "name": "语文成绩"
    },
    {
      "name": "数学成绩"
    },
    {
      "name": "英语成绩"
    },
    {
      "name": "总分"
    }
  ]
}