Vue中导出表格插件，简单实用 安装插件npm install --save xlsx在项目中使用插件<template> <div @click="exportExcel">开始导出</div> </template> <script> import XLSX from 'xlsx' export default { methods: { /* 点击导出表格事件 */ exportExcel(){ /* 假设这是后端返回的数据 */ let data = [{ itemId: 111, title: "ces", link: "aaaa" }, ....] /* 将数据重新格式化下 */ let newData = this.filterXlsx(data) console.log(newData) /* 新建空workbook，然后加入worksheet */ let ws = XLSX.utils.json_to_sheet(data) // 设置每列的宽度, 第几个对象代表第几列 ws['!cols'] = [ { 'wch': 15 }, { 'wch': 50 } ] /* 新建book */ let wb = XLSX.utils.book_new() /* 生成xlsx文件(book,sheet数据,sheet命名) */ XLSX.utils.book_append_sheet(wb, ws, '商品监控页汇总数据导出') /* 写文件(book,xlsx文件名称) */ XLSX.writeFile(wb, '商品监控页汇总数据表.xlsx') } /* 导出表格的数据 */ filterXlsx(data) { let xlsxData = [] data.forEach(item => { xlsxData.push({ 商品ID: item.itemId, 商品名称: item.title, 商品链接: item.link, }) }) return xlsxData }, } } </script>

ElementUI表格不调用后端接口实现分页功能 <!-- 主要是使用slice对数组进行切割 --> <el-table border :data="itemList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"> .... </el-table> <script> data() { return { // 所有的数据列表 itemList: [....], // 当前页码 currentPage: 1, // 分页尺寸 pageSize: 10, // 分页总数 pageTotal: 30 } } </script>

Css设置单行文本多行文本溢出隐藏并以省略号显示 单行文本溢出white-space: nowrap; text-overflow: ellipsis; overflow: hidden;两行溢出display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;