Maison > interface Web > js tutoriel > Explication détaillée des étapes pour exporter des tables dans v-for

Explication détaillée des étapes pour exporter des tables dans v-for

php中世界最好的语言
Libérer: 2018-05-12 11:22:18
original
2210 Les gens l'ont consulté

Cette fois, je vais vous donner une explication détaillée des étapes pour exporter des tables dans v-for. Quelles sont les précautions pour exporter des tables dans v-for. cas. Jetons un coup d'oeil.

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

 npm install -S file-saver xlsx
 npm install -D script-loader
Copier après la connexion

2. Créez-en de nouveaux dans le dossier A du projet : (fournisseur --- nommez comme vous le souhaitez)

Placez-y deux fichiers Blob.js et Export2Excel.js.

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]))
    }
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de mise en œuvre du POST inter-domaines JS

Utilisation du sélecteur de région (V- Distpicker) composant Explication détaillée

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal