2024年前端最全vue导出表格(2)，2024年最新杨幂面试篇

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

import FileSaver from ‘file-saver’

import XLSX from ‘xlsx’

3、添加导出方法

---

只需要更改对应文件名和即可

exportExcel () {

var wb = XLSX.utils.table_to_book(document.querySelector(‘#tableName’))

var wbout = XLSX.write(wb, { bookType: ‘xlsx’, bookSST: true, type: ‘array’ })

try {

FileSaver.saveAs(new Blob([wbout], { type: ‘application/octet-stream’ }), ‘student.xlsx’)

} catch (e) { if (typeof console !== ‘undefined’) console.log(e, wbout) }

return wbout

},

4、设置Button按钮触发方法*exportExcel()*即可

---

<el-button type=“primary” @click=“exportExcel()”>导出

5、完整代码

---

<el-button type=“primary” @click=“exportExcel()”>导出

<el-table

:data=“students”

:header-cell-style="{

background: ‘#E7F4FF’,

color: ‘#000’,

‘font-weight’: ‘700’,

}"

border

stripestyle=“width: 100%”

<el-table-column

prop=“ownCode”

label=“学生ID”

align=“center”

width=“200px”

<el-table-column

prop=“phone”

label=“手机号”

align=“center”

<el-table-column

prop=“name”

label=“学生姓名”

align=“center”

<el-table-column

prop=“sex”

label=“学生性别”

align=“center”

width=“100px”

<el-table-column

prop=“age”

label=“学生年龄”

align=“center”

<el-table-column

prop=“enabled”

label=“学生状态”

align=“center”

width=“100px”

<el-tag size=“small” v-if=“scope.row.enabled == ‘Y’” effect=“plain”

生效</el-tag

<el-tag

size=“small”

v-if=“scope.row.enabled == ‘N’”

effect=“plain”

type=“danger”

失效</el-tag

<el-button size=“mini” @click=“handleEdit(scope.$index, scope.row)”

修改</el-button

<el-button

size=“mini”

type=“danger”

@click=“handleDelete(scope.$index, scope.row)”

删除</el-button