Complemento: use el complemento vue-json-excel para realizar la función de tabla de Excel simple de exportación frontal pura de Vue.
1. Instalar dependencias
npm install vue-json-excel
2. Importar componentes
importación mundial
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
introducción local
import JsonExcel from "vue-json-excel";
components: {
DownloadExcel: JsonExcel,
},
3. Usar en la plantilla
<download-excel
class="export-btn"
:data="tableData"
:fields="jsonFields"
type="xls"
header="患者列表"
name="患者列表.xls"
>
导出
</download-excel>
parámetro
name=“患者列表”. ------------------导出Excel文件的文件名
header="列表" ------------------ 这是个excel的头部
:fields = “jsonFields” ------------------Excel中表头的名称(里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定,默认导出全部数据中心全部字段)
:data = “tableData”. -------------------导出的数据
type="xls" -------------------导出Excel的文件类型,默认为xls
————————————————
4. Configuración del encabezado de la tabla de Excel
export default{
data(){
return{
jsonFields: {
'序号': 'type',
'姓名': 'userName',
'年龄': 'age',
'手机号': 'phone',
'注册时间': 'createTime',
},
}
}
}
5. Datos en la tabla de Excel
export default{
data(){
return{
tableData:[
{
"userName":"张三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},
{
"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},
{
"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},
{
"userName":"赵六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},
]
}
}
}