vue2 实现表格信息导出的功能

最新推荐文章于 2024-04-11 21:50:45 发布

代码大帝

最新推荐文章于 2024-04-11 21:50:45 发布

阅读量366

点赞数

文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/qq_60614034/article/details/129603068

版权

功能图：

通过点击按钮实现导出功能

main.js 导入

Vue.component('downloadExcel', JsonExcel)

导出按钮

        <download-excel style="float: right;margin-right: 210px"
                        class="export-btn"
                        :data="dicts"
                        :fields="jsonFields"
                        type="xls"
                        header="字典信息"
                        name="字典信息.xls"
        >
          <el-button type="warning" round size="mini" >导出</el-button>
        </download-excel>

Data

 data() {
    return {
      options: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '停用'
      }],
      dicts: [],
      dict: {},
      current: 1,
      total: 0,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      username: null,
      dictName: "",
      dictType: "",
      dateTime: "", //开始日期+结束日期
      createTime: null,
      updateTime: null,
      value: "",//角色状态选中的值
      jsonFields: {  //导出Excel表格的表头设置
        '字典编号': 'dictId',
        '字典名称': 'dictName',
        '字典类型': 'dictType',
        '状态码': 'status',
        '创建者': 'createBy',
        '创建时间': 'createTime',
        '修改者': 'updateBy',
        '修改时间': 'updateTime',
        '备注': 'remark',
      },

导出按钮需要数据

dicts: [],

jsonFields: {  //导出Excel表格的表头设置
  '字典编号': 'dictId',
  '字典名称': 'dictName',
  '字典类型': 'dictType',
  '状态码': 'status',
  '创建者': 'createBy',
  '创建时间': 'createTime',
  '修改者': 'updateBy',
  '修改时间': 'updateTime',
  '备注': 'remark',
},

jsonFields规定表头，属性为dicts集合里的对象的属性