请问是否有更加方便的Table类的组件（我们传入datasource，直接就进行展示）？

Question

我们知道使用一个Table进行数组数据的展示，需要定义columns，然后再传入进行展示：

import React from 'react';
import { Table } from 'antd';

// 模拟数据数组
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园2号'
  }
];

// 列定义
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  }
];

const App = () => {
  return <Table dataSource={dataSource} columns={columns} />;
};

export default App;

请问是否有更加方便的组件呢（我们传入datasource，直接就进行展示）？

Answer 1

如果你使用的是 vue 的话，可以使用 vuetify 组件库的 v-data-table 组件：

<template>
  <v-app>
    <v-container>
      <v-data-table :headers="columns" :items="dataSource" />
    </v-container>
  </v-app>
</template>

<script setup>
  // 模拟数据数组
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园2号',
    },
  ]

  // 列定义
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
  ]
</script>

在线体验：Vuetify Play

如果你使用的是 react 的话，可以使用 antd 的 table 组件

Answer 2

组件库几乎或者暴论点儿肯定不可能提供这样的形式。

不是说因为表头有啥非常灵活的定制化之类的需求，而是最大的问题在于 Object 的属性键是无序的。比如你题目里代码里字面量声明出来的是 key, name, age, address 这四个属性。可问题是组件怎么能知道是这四个属性、又是这四个顺序呢？组件它不知道你传入的 DataSource 是何种结构、自然也不知道你要按什么样的列顺序给它们显示出来。

不过既然你已经用 React 了，你完全可以自己实现一个 HOC 来简化 columns 的声明，以减少样板代码。

P.S. 如果你尝试遍历一个 Object 的属性（比如用 Object.keys 啥的），你可能觉得得到的是一个固定的顺序。但很遗憾，业务上你并不能依赖它，因为这是一个 Undefined Behavior，完全取决于浏览器的具体实现，实际上不同浏览器遍历的结果也确实会有不同。ECMA 只规定了 Object.keys 结果的顺序和 for ... in 的顺序是要一致的，但并未规定它俩必须要以何种顺序返回。