Vue+Element，记动态生成表格在一个运维项目的应用

2023-11-01 03:03:56

前言

在日常的运维工作中，我们经常需要查询各种系统的信息，这些信息通常以命令行输出的形式呈现。为了方便查看和分析这些信息，我们通常会将其导出到Excel表格中。然而，如果信息量较大，手动导出和整理表格会非常耗时且容易出错。因此，我们希望能够在前端实现一个动态生成表格的功能，以便能够快速、方便地将命令行查询的结果展示在表格中。

技术选型

在选择前端框架时，我们考虑了Vue和React两种主流框架。最终，我们选择了Vue，因为Vue具有以下优点：

学习曲线较低，上手容易
丰富的生态系统，可以方便地找到各种组件和插件
官方文档完善，社区活跃

在选择UI库时，我们考虑了Element和Ant Design两种主流库。最终，我们选择了Element，因为Element具有以下优点：

样式美观，组件丰富
与Vue的集成度高，使用方便
社区活跃，文档完善

功能需求

我们希望实现以下功能：

动态生成表格，表格的列名和列数可以根据需要进行调整
表格列可以排序、筛选
表格可以搜索
表格可以导出到Excel

实现方案

动态生成表格

可以使用Vue的v-for指令来动态生成表格。

<template>
  <table border="1">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.name">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.name">{{ row[column.name] }}</td>
      </tr>
    </tbody>
  </table>
</template>

表格列排序

可以使用Vue的computed属性来实现表格列排序。

computed: {
  sortedData() {
    return this.data.sort((a, b) => {
      if (this.sortColumn.name === 'id') {
        return a.id - b.id;
      } else {
        return a[this.sortColumn.name] > b[this.sortColumn.name] ? 1 : -1;
      }
    });
  }
}

表格列筛选

可以使用Vue的v-model指令来实现表格列筛选。

<template>
  <input type="text" v-model="filterText">
</template>

computed: {
  filteredData() {
    return this.data.filter(row => {
      return Object.values(row).some(value => {
        return value.toString().includes(this.filterText);
      });
    });
  }
}

表格搜索

可以使用Vue的v-model指令来实现表格搜索。

<template>
  <input type="text" v-model="searchText">
</template>

computed: {
  searchedData() {
    return this.data.filter(row => {
      return Object.values(row).some(value => {
        return value.toString().includes(this.searchText);
      });
    });
  }
}

表格导出Excel

可以使用Vue的第三方库vue-table-export来实现表格导出Excel。

import VueTableExport from 'vue-table-export'

Vue.use(VueTableExport)

<template>
  <button @click="exportExcel">导出Excel</button>
</template>

methods: {
  exportExcel() {
    this.$export(this.$refs.table, {
      filename: '表格',
      sheetName: '表格',
      columnWidths: {
        id: 100,
        name: 200,
        age: 100
      }
    })
  }
}