vue3中的el-table-column实现拖动调整列宽，并且可以保存调整后的列宽。

strxiaojie

已于 2024-01-23 16:58:15 修改

阅读量2.9k

点赞数 16

文章标签： vue.js elementui javascript

于 2024-01-19 11:04:54 首次发布

本文链接：https://blog.csdn.net/strxiaojie/article/details/135692314

版权

本文介绍了如何在Vue项目中使用el-table组件实现列宽的动态调整，并通过监听`header-dragend`事件保存调整后的宽度到本地存储。同时，展示了如何在页面加载时从本地恢复列宽配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先把表单给写出来，我是通过循环出的表单，如果你们不是还需要按照自己的写法来改一下。

<el-table>标签中添加@header-dragend事件，用于监听列宽调整的结束事件。

<el-table
        :data="tableData"
        border
        @header-dragend="handleHeaderDragend"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column
          v-for="column in columnConfig"
          :key="column.property"
          :prop="column.property"
          :label="column.label"
          :width="column.width"
          :sortable="column.sortable"
          :show-overflow-tooltip="column.showOverflowTooltip"
      >
        <!-- 使用具名插槽来自定义 category_id 列的显示 -->
        <template v-if="column.property === 'category_id'" #default="scope">
          <el-tag>{{ scope.row.category_id }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作" width="70">
        <template #default="scope">
          <el-icon class="hand-cursor mr-1" @click="handleEdit(scope.row.id)">
            <View/>
          </el-icon>
          <el-icon @click="handleDelete(scope.row.id)" class="hand-cursor">
            <Delete/>
          </el-icon>
        </template>
      </el-table-column>
    </el-table>

再写出一个被循环的数组(我没有使用TS，原因可以看我以前写的：TS已被抛弃)：

这个比较简单就不多说了，只是一个被循环的数据。

const columnConfig = ref([
  // 示例列配置，你需要根据你的实际需求来设置这些值
  {property: 'name', width: 'defaultWidth', label: '资产', sortable: true, showOverflowTooltip: false},
  {property: 'category_id', width: 'defaultWidth', label: '分类', sortable: true, showOverflowTooltip: false},
  {property: 'vest_name', width: 'defaultWidth', label: '主体', sortable: true, showOverflowTooltip: false},
  {property: 'area', width: 'defaultWidth', label: '区域', sortable: true, showOverflowTooltip: true},
  {property: 'description', width: 'defaultWidth', label: '描述', sortable: false, showOverflowTooltip: true},
  {property: 'location', width: 'defaultWidth', label: '位置', sortable: false, showOverflowTooltip: true},
]);

然后，添加handleHeaderDragend方法，用于保存调整后的列宽。

const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
  console.log(newWidth, oldWidth, column, event)
  const columnWidths = JSON.parse(localStorage.getItem('columnWidths')) || {};
  columnWidths[column.property] = newWidth;

  // 保存列宽度到本地存储
  localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
}

接下来，在onMounted中，获取之前保存的列宽，并将其应用到相应的列上。

import {onMounted} from "vue";//一定记得要引入一下

onMounted(async () => {
  // 获取本地存储中保存的列宽度
  const columnWidths = JSON.parse(localStorage.getItem('columnWidths')) || {};

  // 遍历本地的表格列配置，将保存的列宽度应用到对应的列上
  columnConfig.value.forEach(column => {
    if (columnWidths[column.property]) {
      column.width = columnWidths[column.property];
    }
  });

  await getData()//这里是我获取列表参数的方法，需要按照自己的方式改一下！（不要全抄！）
});

目前到这里就结束了。但是如果你觉得这样对你来说有点丑，你既要可以拖动的功能，又要下面的表格不要边框。你可以在css中加入这段代码：

.el-table--border .el-table__body td,
.el-table__header th { //不要数据的边框
//.el-table--border .el-table__header th {//什么边框都不要
  //border-color: transparent;
  border-right: transparent;
  border-left: transparent;
}