使用 iView Table 生成动态日期表格，玩转数据可视化

2023-10-12 08:56:42

最近接到一个动态渲染表格的需求。

技术栈
iViewUI。

实现思路
table中的key值与data的值相匹配。

操作步骤

首先，安装iView Table组件：

npm install iview-table --save

然后，在您的项目中导入iView Table组件：

import { Table } from 'iview-table';

接下来，创建一个新的Vue组件，并将其命名为DynamicDateTable.vue：

<template>
  <div>
    <Table :data="tableData" :columns="tableColumns" />
  </div>
</template>

<script>
import { Table } from 'iview-table';

export default {
  name: 'DynamicDateTable',
  components: { Table },
  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          title: 'Date',
          key: 'date',
          type: 'date',
          width: 150,
        },
        {
          title: 'Value',
          key: 'value',
          width: 100,
        },
      ],
    };
  },
  mounted() {
    // 从服务器获取数据并填充表格数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 这里假设我们从服务器获取的数据是一个数组，其中包含日期和值
      const data = [
        { date: '2023-03-08', value: 100 },
        { date: '2023-03-09', value: 200 },
        { date: '2023-03-10', value: 300 },
      ];

      this.tableData = data;
    },
  },
};
</script>