vue element ui table组件列宽可以拖拽调整大小，某一列可以禁止拖拽调整大小

'# vue element ui table组件列宽可以拖拽调整大小，某一列可以禁止拖拽调整大小

一、背景与问题

在数据展示场景中，表格组件的列宽调整功能是提升用户体验的重要特性。Element UI 的 el-table 组件默认支持列宽拖拽调整，但业务需求中常出现需要对特定列进行限制的情况：例如关键字段列（如ID、时间戳）需要固定宽度，而其他列允许自由调整。这种场景需要开发者在保持默认行为的同时，实现对特定列的拖拽限制。

该需求的核心挑战在于：如何在不破坏原有拖拽逻辑的前提下，实现对特定列的拖拽禁用。需要深入理解 Element UI 的列宽调整机制，并结合前端事件处理、DOM操作等技术手段完成。

二、基本原理

Element UI 的 el-table 列宽调整功能通过以下机制实现：

拖拽事件监听：通过 mousedown 事件在列头区域添加拖拽标记
列宽计算：通过 offsetWidth 获取列宽，通过 scrollLeft 计算表格滚动位置
动态样式更新：通过 style.width 动态修改列宽
列头与内容对齐：通过 transform: translateX 实现列头与内容的同步

要禁用某一列的拖拽，需要在上述流程中插入逻辑判断：当拖拽操作发生在目标列时，阻止事件冒泡和后续的列宽计算流程。

三、环境准备

确保开发环境满足以下要求：

# 安装 vue 和 element-ui
npm install vue@^2.6.14 element-ui@^2.2.19

项目结构建议：

src/
├── components/
│   └── TableWithFixedColumn.vue
├── App.vue
└── main.js

四、核心实现

1. 基础禁用实现（推荐方案）

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      :resizable="false"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      :resizable="true"
    ></el-table-column>
    <el-table-column
      prop="timestamp"
      label="时间"
      width="180"
      :resizable="false"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', timestamp: '2023-01-01' },
        { id: 2, name: '李四', timestamp: '2023-01-02' }
      ]
    };
  }
};
</script>

关键代码解释：

:resizable="false" 是 Element UI 提供的原生属性
该属性直接作用于 el-table-column 组件
适用于静态列宽限制场景

2. 动态控制禁用（进阶方案）

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      :resizable="isResizable('id')"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      :resizable="isResizable('name')"
    ></el-table-column>
    <el-table-column
      prop="timestamp"
      label="时间"
      width="180"
      :resizable="isResizable('timestamp')"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', timestamp: '2023-01-01' },
        { id: 2, name: '李四', timestamp: '2023-01-02' },
        { id: 3, name: '王五', timestamp: '2023-01-03' }
      ],
      disableColumns: ['id', 'timestamp']
    };
  },
  methods: {
    isResizable(prop) {
      return !this.disableColumns.includes(prop)
    }
  }
};
</script>

关键代码解释：

通过 isResizable 方法动态控制列宽调整
适用于需要根据业务状态动态切换的场景
需要注意 prop 与数据字段的对应关系

3. 自定义事件拦截方案（高级用法）

<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    ref="table"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      :resizable="true"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      :resizable="true"
    ></el-table-column>
    <el-table-column
      prop="timestamp"
      label="时间"
      width="180"
      :resizable="true"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', timestamp: '2023-01-01' },
        { id: 2, name: '李四', timestamp: '2023-01-02' }
      ]
    };
  },
  mounted() {
    this.handleResize()
  },
  methods: {
    handleResize() {
      const table = this.$refs.table.$el
      const columns = table.querySelectorAll('.el-table__header-wrapper .el-table__header-row td')
      
      columns.forEach((col, index) => {
        if (index === 2) { // 禁用第三列
          col.addEventListener('mousedown', (e) => {
            e.stopPropagation()
          })
        }
      })
    }
  }
};
</script>

关键代码解释：

通过 DOM 操作直接拦截拖拽事件
适用于需要更精细控制的场景
注意需要处理组件卸载时的事件清理

五、完整案例

1. 业务场景：用户管理表格

<template>
  <div style="padding: 20px;">
    <el-table 
      :data="tableData" 
      border 
      style="width: 100%"
      ref="table"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100"
        :resizable="false"
      >
        <template slot-scope="scope">
          <span style="color: #409EFF;">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="150"
        :resizable="true"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.username }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="200"
        :resizable="true"
      >
        <template slot-scope="scope">
          <a :href="`mailto:${scope.row.email}`" style="color: #409EFF;">{{ scope.row.email }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180"
        :resizable="false"
      >
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.created_at) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, username: 'admin', email: 'admin@example.com', created_at: '2023-01-01' },
        { id: 2, username: 'user', email: 'user@example.com', created_at: '2023-01-02' }
      ]
    };
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleString()
    }
  }
};
</script>

2. 运行效果说明

ID 列和创建时间列无法调整宽度
用户名和邮箱列可自由调整
禁用的列保持固定宽度，不影响其他列的调整
禁用列的样式可通过 :resizable 属性控制

六、源码解析

Element UI 的 el-table 组件在 el-table-column 中处理列宽调整的逻辑主要在：

// element-ui/packages/table/src/main.js
export default {
  name: 'ElTable',
  // ...其他属性
  methods: {
    handleResize() {
      // 拖拽事件处理逻辑
      // 包含列宽计算、样式更新等核心逻辑
    }
  }
}

关键点分析：

handleResize 方法负责列宽调整的全部逻辑
通过 this.$el.querySelectorAll('.el-table__header th') 获取列头元素
通过 getBoundingClientRect() 获取列宽信息
通过 scrollLeft 计算表格滚动位置
通过 style.width 更新列宽

七、进阶使用

1. 动态列宽控制

<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    :row-class-name="getRowClassName"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      :resizable="false"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      :resizable="true"
    ></el-table-column>
    <el-table-column
      prop="timestamp"
      label="时间"
      width="180"
      :resizable="true"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', timestamp: '2023-01-01' },
        { id: 2, name: '李四', timestamp: '2023-01-02' }
      ],
      isResizable: false
    };
  },
  methods: {
    getRowClassName() {
      return 'resizable-row'
    },
    toggleResizable() {
      this.isResizable = !this.isResizable
    }
  }
};
</script>

<style>
.resizable-row .el-table__header th {
  cursor: col-resize;
}
</style>

2. 自定义拖拽样式

<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    ref="table"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="100"
      :resizable="false"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      :resizable="true"
    ></el-table-column>
    <el-table-column
      prop="timestamp"
      label="时间"
      width="180"
      :resizable="true"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', timestamp: '2023-01-01' },
        { id: 2, name: '李四', timestamp: '2023-01-02' }
      ]
    };
  },
  mounted() {
    this.handleResize()
  },
  methods: {
    handleResize() {
      const table = this.$refs.table.$el
      const columns = table.querySelectorAll('.el-table__header-wrapper .el-table__header-row td')
      
      columns.forEach((col, index) => {
        if (index === 2) { // 禁用第三列
          col.addEventListener('mousedown', (e) => {
            e.stopPropagation()
          })
        }
      })
    }
  }
};
</script>

八、性能与工程实践

1. 性能优化建议

避免在 mounted 阶段频繁操作 DOM
使用 nextTick 确保 DOM 渲染完成
对列宽调整逻辑进行防抖处理
对于大数据量表格，考虑使用虚拟滚动技术

2. 异常处理方案

handleResize() {
  try {
    const table = this.$refs.table.$el
    const columns = table.querySelectorAll('.el-table__header-wrapper .el-table__header-row td')
    
    columns.forEach((col, index) => {
      if (index === 2) {
        col.addEventListener('mousedown', (e) => {
          e.stopPropagation()
        })
      }
    })
  } catch (err) {
    console.error('列宽调整事件绑定失败:', err)
  }
}

3. 安全性考虑

避免通过 eval 等危险方法处理用户输入
对动态生成的列内容进行 XSS 过滤
对列宽调整后的宽度值进行范围校验
对敏感数据列（如 ID）进行加密存储

九、常见问题与踩坑

1. 常见错误

错误示例：

<el-table-column prop="id" label="ID" width="100" resizable="false"></el-table-column>

错误原因：

resizable 属性应使用 :resizable 绑定语法
未使用 v-bind 或 : 前缀会导致属性值被当作字符串处理

正确写法：

<el-table-column prop="id" label="ID" width="100" :resizable="false"></el-table-column>

2. 常见问题

问题1：禁用的列仍然可以调整

原因：未正确覆盖 Element UI 的默认行为
解决方案：使用 e.stopPropagation() 拦截事件

问题2：列宽调整后无法恢复

原因：未正确处理 resize 事件的回滚机制
解决方案：使用 resize 事件监听器进行状态同步

问题3：移动端兼容性问题

原因：触屏事件未被正确处理
解决方案：添加 touchstart 事件监听

十、最佳实践

1. 推荐方案

对关键业务列使用 :resizable="false" 禁用调整
对可调整列使用 :resizable="true" 保持默认行为
对需要动态控制的列，使用 v-bind 动态绑定属性
对特殊需求的列，使用自定义事件拦截方案

2. 使用建议

在需要保持列宽一致的场景中使用禁用调整
在需要灵活展示的场景中保留调整功能
对涉及敏感数据的列进行禁用调整
对需要固定宽度的列（如时间戳、ID）进行禁用调整
对可调整列设置合理的最小/最大宽度限制

3. 避免使用场景

需要完全控制列宽的场景
移动端不支持拖拽操作的场景
需要基于业务逻辑调整列宽的场景
需要动态计算列宽的场景

十一、总结

Element UI 的 el-table 组件提供了丰富的列宽调整功能，通过 :resizable 属性可以灵活控制列宽调整行为。在实际开发中，需要根据具体业务需求选择合适的实现方案：对于简单的禁用需求，直接使用 :resizable="false" 即可；对于需要动态控制的场景，使用 v-bind 动态绑定属性；对于特殊需求，可以采用自定义事件拦截方案。

需要注意的是，禁用列宽调整可能会影响用户体验，需要在保持功能完整性和用户体验之间找到平衡。在开发过程中，要特别注意事件冒泡、DOM操作、性能优化等方面的问题，确保功能的稳定性和可维护性。

通过合理使用这些技术，可以在保持表格功能完整性的同时，满足不同的业务需求，提升用户操作的灵活性和数据展示的可读性。

vue element ui table组件列宽可以拖拽调整大小，某一列可以禁止拖拽调整大小

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础禁用实现（推荐方案）

2. 动态控制禁用（进阶方案）

3. 自定义事件拦截方案（高级用法）

五、完整案例

1. 业务场景：用户管理表格

2. 运行效果说明

六、源码解析

七、进阶使用

1. 动态列宽控制

2. 自定义拖拽样式

八、性能与工程实践

1. 性能优化建议

2. 异常处理方案

3. 安全性考虑

九、常见问题与踩坑

1. 常见错误

2. 常见问题

十、最佳实践

1. 推荐方案

2. 使用建议

3. 避免使用场景

十一、总结

评论已关闭

推荐阅读