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/

相关推荐
坚持学习前端日记14 分钟前
AI 产品开发经验
前端·javascript·人工智能·visual studio
雾削木21 分钟前
STM32输入捕获测量PWM频率占空比
前端·javascript·stm32
JamesYoung797125 分钟前
第八部分 — UI 表面 动作(工具栏)、徽标、弹出窗口
前端·javascript
Joker Zxc27 分钟前
【前端基础(Javascript部分)】5、JavaScript的循环语句
开发语言·前端·javascript
大鸡爪1 小时前
Vue3 组件库实战(五):Icon 图标组件的设计与实现
前端·vue.js
大鸡爪1 小时前
Vue3 组件库实战(七):从本地到 NPM:版本管理与自动化发布指南(下)
前端·vue.js
qq_406176141 小时前
详解Vue中的计算属性(computed)和观察属性(watch)
开发语言·前端·javascript·vue.js·前端框架
兆子龙2 小时前
React Fiber 调度器源码解析:从 workLoop 到 commit 的完整渲染链路
前端·javascript
叫回忆2 小时前
elpis的动态组件拓展
javascript