用vue-cli做项目，引用elementUI组件，实现如下列表。
要求记录用户手动改变的列宽，后台记录的话还要建库存储，就让前端缓存记录。
前端本地存储技术在 H5本地存储—sessionStorage 中已经提及，这里不再多说。
根据 element UI table文档 我们发现可以通过
header-dragend事件来获取列宽改变的一些信息
实现思路
- 在每次改变列宽的时候都记录一下当前dom所有列宽值，在再次进入页面时赋值上去
在期间会遇到两个坑
-
localStorage存的是数组，取值的时候却变成了字符串，这时要用JSON.stringify和JSON.parse来做下格式转换； - 在触发拖动表头改变列宽事件时，会发现它先获取了当前dom的表头宽度，再进行的改变，这样就会出现每次都“慢半拍”的现象。要解决这个问题，开始想到了 Vue.nextTick 方法，但经试验后并未该问题；最终大神用延迟函数
setTimeout的办法实现的~
完整代码
<el-table
id="applyTable"
:data="listData"
height="100%"
border
stripe
@header-dragend="colChange">
<el-table-column
v-for="(item,index) in tableColumns"
:key="index"
:type="item.type"
:width="item.width"
:prop="item.prop"
:label="item.label">
</el-table-column>
<el-table-column
label="操作"
:resizable="false">
<template slot-scope="scope">
<button class="u-button">填写申请单</button>
<button class="u-button">删除</button>
</template>
</el-table-column>
</el-table>
export default {
data () {
return {
// 列表数据
listData: [],
// 列表表格内容
tableColumns: [
{ type: 'selection', width: '50', prop: '', label: '' },
{ type: 'index', width: '50', prop: '', label: '' },
{ type: '', width: '180', prop: 'patientName', label: '患者姓名' },
{ type: '', width: '60', prop: 'sex', label: '性别' },
{ type: '', width: '', prop: 'deviceType', label: '设备类型' },
{ type: '', width: '', prop: 'applyTime', label: '申请时间' },
{ type: '', width: '', prop: 'imagesNum', label: '图像数' },
{ type: '', width: '', prop: 'uploadStatus', label: '上传状态' },
{ type: '', width: '', prop: 'uploadType', label: '上传方式' }
]
}
},
methods: {
/**
* 获取浏览器缓存的列宽
*/
getTableColWidth () {
let tableWidth = localStorage.getItem('applyTableColWidths')
if (tableWidth) {
for (let item = 0; item < this.tableColumns.length; item++) {
this.tableColumns[item].width = JSON.parse(tableWidth)[item]
}
}
},
/**
* 拖动表头改变列宽
*/
colChange (newWidth, oldWidth, column, event) {
setTimeout(() => {
console.log(newWidth, oldWidth, column, event)
console.log('拖动表头改变列宽')
let applyTableColWidths = []
let applyTable = document.getElementById('applyTable')
let applyTableColgroup = applyTable.getElementsByTagName('colgroup')[0]
let applyTableCol = applyTableColgroup.getElementsByTagName('col')
for (let i = 0; i < applyTableCol.length; i++) {
applyTableColWidths.push(applyTableCol[i].width)
}
console.log(applyTableColWidths)
localStorage.setItem('applyTableColWidths', JSON.stringify(applyTableColWidths))
}, 100)
} ,
mounted () {
this.getTableColWidth()
}
如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
