记录表格宽度，刷新后宽度依然保持不变功能设计与实现

2023-09-26 00:13:45

表格列宽调整：让数据展示更灵活

引言

在Web应用开发中，表格组件是不可或缺的UI元素，用于清晰、直观地呈现数据。然而，随着表格应用场景的多样化，对表格功能的需求也变得更加多元，其中一个常见的需求就是列宽的自由调整。本文将深入探讨如何使用Element UI的el-table组件实现列宽的持久化调整，即使在页面刷新后也能保持不变。

解决方案：优雅而高效

1. 实时监听列宽变化

当用户调整列的宽度时，我们需要实时记录这些变化。为此，我们利用了el-table组件提供的"column-resize"事件，该事件会在列宽发生变化时触发。通过监听该事件，我们可以获取到调整后的列的属性和新宽度。

// 监听列宽度的变化
const elTable = document.querySelector('.el-table');
elTable.addEventListener('column-resize', (event) => {
  const { column, newWidth } = event.detail;
  // 将列宽度信息存储到localStorage中
  localStorage.setItem(`el-table-column-width-${column.property}`, newWidth);
});

2. 持久化存储列宽信息

为了在页面刷新后仍能读取列宽信息，我们需要将其存储到一个持久化的介质中。这里我们选择使用localStorage，一种Web存储API，可以存储键值对数据，并在浏览器会话期间保持不变。

// 将列宽度信息存储到localStorage中
const columnProperty = 'age';
const newWidth = '150px';
localStorage.setItem(`el-table-column-width-${columnProperty}`, newWidth);

3. 页面刷新后恢复列宽

最后，在页面刷新后，我们需要从localStorage中读取存储的列宽信息，并将其应用到el-table组件中。这是通过在el-table组件的"created"钩子函数中实现的，该钩子函数会在组件创建时触发，非常适合在此处执行列宽的恢复操作。

// 从localStorage中读取列宽度信息并应用到el-table组件中
const elTable = document.querySelector('.el-table');
elTable.addEventListener('created', () => {
  const columns = elTable.querySelectorAll('.el-table-column');
  columns.forEach((column) => {
    const columnProperty = column.getAttribute('prop');
    const storedWidth = localStorage.getItem(`el-table-column-width-${columnProperty}`);
    if (storedWidth) {
      column.style.width = storedWidth;
    }
  });
});

代码示例

<template>
  <el-table :data="tableData" :row-key="row => row.id" @column-resize="handleColumnResize">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      { id: 1, name: 'John', age: 30, address: '123 Main Street' },
      { id: 2, name: 'Jane', age: 25, address: '456 Elm Street' },
      { id: 3, name: 'Peter', age: 40, address: '789 Oak Street' },
    ]);

    const handleColumnResize = (event) => {
      const { column, newWidth } = event.detail;
      localStorage.setItem(`el-table-column-width-${column.property}`, newWidth);
    };

    return {
      tableData,
      handleColumnResize,
    };
  },
};
</script>

优势与应用场景

这种解决方案具有以下优势：

持久性： 列宽调整的信息即使在页面刷新后也能保持不变，解决了表格初始化时需要重新调整列宽的痛点。
灵活性： 用户可以根据需要自由调整表格中任何列的宽度，以优化数据展示效果。
轻量级： 该解决方案不会对表格组件的性能造成显著影响。

其应用场景包括：

复杂表格： 包含大量列的表格，需要用户根据列内容的不同长度调整列宽，以提高可读性。
数据分析： 涉及数据分析和比较的表格，通过调整列宽可以突出显示关键数据，提高分析效率。
自定义表格： 需要用户自定义表格外观的场景，列宽调整功能可以满足不同用户的个性化需求。

常见问题解答

1. 如何在特定列上禁用列宽调整？

const elTable = document.querySelector('.el-table');
const ageColumn = elTable.querySelector('.el-table-column--age');
ageColumn.classList.add('el-table-column--disable-resize');

2. 如何重置所有列的宽度？

const elTable = document.querySelector('.el-table');
elTable.querySelectorAll('.el-table-column').forEach((column) => {
  column.style.width = '';
});
localStorage.clear();

3. 如何获取当前列的宽度？

const elTable = document.querySelector('.el-table');
const ageColumn = elTable.querySelector('.el-table-column--age');
const width = ageColumn.style.width;

4. 如何限制列宽的最小值和最大值？

const elTable = document.querySelector('.el-table');
const ageColumn = elTable.querySelector('.el-table-column--age');
ageColumn.style.minWidth = '100px';
ageColumn.style.maxWidth = '200px';

5. 如何在列宽调整时触发自定义事件？

const elTable = document.querySelector('.el-table');
elTable.addEventListener('column-resize', (event) => {
  const { column, newWidth } = event.detail;

  // 触发自定义事件
  elTable.dispatchEvent(new CustomEvent('column-resized', {
    detail: {
      column,
      newWidth,
    },
  }));
});