el-table 表格拖拽宽度存储

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>