el-table border属性为true时才会生效
完整代码如下
<template>
<div>
<el-table
v-loading="loading"
id="applyTable"
ref="testTabel"
border
@header-dragend="handleDrag"
:data="tableFilterData.dataList"
>
<el-table-column
v-for="(item, index) in tableFilterData.dataNow"
:key="index"
:width="item.width"
:prop="item.attr"
:label="item.label"
:align="item.align ? item.align : 'center'"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
//表格列数据
tableFilterData: {
dataList: [],
dataNow: [
{ width: "50", label: "序号", attr: "number" },
{ width: "150", label: "客户经理账号", attr: "userName" },
{ width: "150", label: "客户经理姓名", attr: "nickName" },
{ width: "150", label: "机构名称", attr: "deptName" },
{ width: "150", label: "机构编号", attr: "deptPhone" },
{ width: "150", label: "对私活期日均", attr: "personAvg1",align: "right"},
{width: "150", label: "对私活期余额", attr: "personAmount1",align: "right"},
{width: "150", label: "对私定期日均", attr: "personAvg2",align: "right"},
{width: "150", label: "对私定期余额", attr: "personAmount2",align: "right"},
{width: "150", label: "对私合计日均", attr: "personAvg3",align: "right"},
{width: "150", label: "对私合计余额", attr: "personAmount3",align: "right"},
{width: "150", label: "对公活期日均", attr: "comAvg1",align: "right"},
{width: "150", label: "对公活期余额", attr: "comAmount1",align: "right"},
{width: "150", label: "对公定期日均", attr: "comAvg2",align: "right"},
{width: "150", label: "对公定期余额", attr: "comAmount2",align: "right"},
{width: "150", label: "对公合计日均", attr: "comAvg3",align: "right"},
{width: "150", label: "对公合计余额", attr: "comAmount3",align: "right"},
{width: "150", label: "自定义余额", attr: "defineAmount",align: "right"},
{width: "150", label: "自定义日均", attr: "defineAvg",align: "right"},
{width: "150", label: "其它余额", attr: "otherAmount", align: "right" },
{width: "150", label: "其它日均", attr: "otherAvg", align: "right" },
],
},
};
},
created() {
this.getList()
},
mounted() {
// 页面加载后宽度回溯
this.getTableColWidth();
},
methods: {
getList() {
getList().then(res => {
this.tableFilterData.data = res.rows
})
},
//刷新重新渲染宽度
getTableColWidth() {
let testTabel = localStorage.getItem("testTabel");
if (testTabel) {
this.tableFilterData.dataNow = Object.assign(
[],
this.tableFilterData.dataNow,
JSON.parse(
decodeURIComponent(window.atob(localStorage.getItem("testTabel")))
)
);
}
},
//表格拖拽宽度存储
handleDrag(newWidth, oldWidth, column, event) {
this.tableFilterData.dataNow.forEach((item) => {
if (item.attr == column.property) {
item.width = column.width;
return;
}
});
localStorage.setItem(
"testTabel",
window.btoa(
window.encodeURIComponent(
JSON.stringify(this.tableFilterData.dataNow)
)
)
);
},
},
};
</script>