前端vue自定义table 表格 表格组件 Excel组件

在Vue中创建一个自定义表格组件，并集成一个可以导出Excel的组件，可以使用vue-table-with-excel-export这样的第三方库。以下是一个简单的例子：

1. 安装所需的库：

npm install vue-table-with-excel-export --save

2. 在Vue组件中使用：

<template>
  <div>
    <excel-table :data="tableData" name="MyTable.xlsx">
      <table-column prop="name" label="Name"></table-column>
      <table-column prop="email" label="Email"></table-column>
      <table-column prop="age" label="Age"></table-column>
    </excel-table>
  </div>
</template>
 
<script>
import { ExcelTable, TableColumn } from 'vue-table-with-excel-export';
 
export default {
  components: {
    ExcelTable,
    TableColumn
  },
  data() {
    return {
      tableData: [
        { name: 'John Doe', email: 'john@example.com', age: 30 },
        { name: 'Jane Doe', email: 'jane@example.com', age: 25 },
        // ... more data
      ]
    };
  }
};
</script>

在这个例子中，ExcelTable是一个包含数据和列定义的表格组件，而TableColumn则用来定义每一列的属性。tableData是要展示的数据数组，每个对象代表一行，而TableColumn的prop属性则对应对象的键。name属性是导出的Excel文件名。

请注意，这个例子中的组件名称和属性可能会随着库的更新而变化，请参照最新的文档。