Home  >  Article  >  Web Front-end  >  How vue exports the table in v-for

How vue exports the table in v-for

不言
不言Original
2018-05-07 14:41:371356browse

This article mainly introduces how vue exports the table in v-for. Friends who need it can refer to it

1. You need to install the following dependencies

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

2. Create a new folder in the project: (vendor---any name)

Place two files, Blob.js and Export2Excel.js.

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

Related recommendations:

A brief discussion on the principle of Vue data responsiveness

Vue implements tree view data function

The above is the detailed content of How vue exports the table in v-for. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn