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

只需要在 el-table-column 标签中添加:resizable="false"即可

javascript 复制代码
<template>
  <div class="m-other-table-wrap">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @header-dragend="handleHeaderDragend"
    >
      <el-table-column prop="date" label="日期" width="180" :resizable="false">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import './index.css'

export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  methods: {
    handleHeaderDragend(e) {
      console.log(e)
    },
  },
}
</script>

<style></style>

参考链接:

https://chat.xutongbao.top/

相关推荐
前端老石人2 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
不可能的是42 分钟前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
Python私教1 小时前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源
Rkgua1 小时前
事件流模型是什么和DOM事件模型等关系
javascript
W.A委员会1 小时前
多行溢出在末尾添加省略号
开发语言·javascript·css
拉里呱唧2 小时前
一个像在使用PPT的在线 HTML 编辑器:HeyHTML
javascript·交互·html5
ayqy贾杰3 小时前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
changshuaihua0013 小时前
扣子开发指南
javascript·人工智能
光影少年3 小时前
对typescript开发框架的理解?
前端·javascript·typescript
a1117764 小时前
“像风之翼“无人机巡检平台仪表盘
前端·javascript·开源·html·无人机