Comment vue exporte la table dans v-for

Cet article présente principalement comment vue exporte la table dans v-for. Les amis qui en ont besoin peuvent s'y référer

1. Les dépendances suivantes doivent être installées<.>

 npm install -S file-saver xlsx
 npm install -D script-loader

2. Créez un nouveau dossier dans le projet : (fournisseur --- n'importe quel nom)

Placez deux fichiers Blob.js et Export2Excel.js à l'intérieur.

3. Dans le fichier .vue

Écrivez ces deux méthodes : la liste est le contenu du tableau

//export2Excel是你点击导出所绑定的方法名
　　　　export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');//其中自己的路径也要注意下
　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];//表格的头的名称
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];//对应的内容的名字，一定要一 一 对应
　　　　　　　　const list = this.tableData;//tableData是你表单所绑定的数据名称，一定要对应
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');//列表excel这个是导出以后表格的名称，根据需要自行更改
　　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}

Recommandations associées :

Une brève discussion sur le principe de réactivité des données de Vue

Vue implémente arborescence Fonction de données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!