Detailed explanation of the steps to export tables in v-for using vue

This time I will bring you a detailed explanation of the steps to export the table in v-for using vue, and a detailed explanation of the steps to export the table in v-for using vue. What are the precautions , the following is a practical case, let’s take a look.

1. NeedinstallationThe following dependencies

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

2. Create a new file in the project Folder: (vendor---name as you like)

Place two files Blob.js and Export2Excel.js in it.

3. In the .vue file

Write these two methods: list is the content of the table

//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]))
　　　　}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use JS to implement POST across domains

Detailed explanation of the steps to use Promise in ES6

The above is the detailed content of Detailed explanation of the steps to export tables in v-for using vue. For more information, please follow other related articles on the PHP Chinese website!