解决element-ui的表格设置固定栏后,右侧边框线消失

 表格最后一列右侧固定,倒数第二列右边框消失了。原因固定列遮住了该边框。

 1.给固定列设置一条左边框

注意:这条消失的边框,气人的是有时又出现了,这样导致会有重复的边框线;

所以保险做法是:添加的同时,去掉前一个格的右边框线;

>>>.el-table__row td:not(.is-hidden):last-child {
  border-left:1px solid #EBEEF5;
}
>>>.el-table__header th:not(.is-hidden):last-child{
  border-left:1px solid #EBEEF5;
}

>>>.el-table__header-wrapper tr th:nth-last-child(3){
  border-right:none;
}
>>>.el-table__body-wrapper tr td:nth-last-child(2){
  border-right:none;
}

2.固定列像右移动1边框像素 

注意:这样会导致表格右侧边框消失

>>>.el-table__row td:not(.is-hidden):last-child {
  /*left:1px;  */
  right:-1px;
}

Vue.js框架本身并不直接提供将数据写入Excel的功能,但它可以结合一些库如`vue-excel-export`或`xlsx`等来实现这个功能。以下是一个基本步骤: 1. 首先,在项目中安装相关的Excel导出库,例如`axios`用于发送HTTP请求,以及`xlsx`或`js-xlsx`用于处理Excel文件: ```bash npm install axios js-xlsx --save ``` 2. 定义一个方法,例如`exportToExcel`,在这个方法中获取你需要写入的数据,并构建一个适合写入Excel的对象。假设你有一组对象数组`data`,你想在Excel的第一行插入表头信息: ```javascript methods: { exportToExcel() { const firstDataRow = ['标题A', '标题B', '标题C']; // 表头 const restDataRows = this.data.map(row => [row.columnA, row.columnB, row.columnC]); // 接下来的行数据 const ws = { data: [{ headerRow: true }, ...firstDataRow, ...restDataRows] }; // 合并表头和数据 const workbook = { SheetNames: ['Sheet1'], Sheets: { 'Sheet1': ws } }; this.exportFile(workbook); }, // 使用axios发送POST请求,将工作簿作为blob内容上传 exportFile(workbook) { const XLSX = require('xlsx'); const blob = new Blob([XLSX.write(workbook, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })], {type: 'application/octet-stream'}); const url = 'your-excel-download-url'; // 替换为你实际的下载URL axios.post(url, {file: blob}).then(response => { if (response.status === 200) { window.location.href = response.data.url; // 下载链接 } }).catch(error => console.error('Export error:', error)); } } ``` 3. 调用`exportToExcel`方法,当你需要把数据导出到Excel时。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值