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 分钟前
Konvajs实现虚拟表格
javascript
比老马还六9 分钟前
Bipes项目二次开发/设置功能-1(五)
前端·javascript
诸葛亮的芭蕉扇32 分钟前
tree组件点击节点间隙的异常问题分析
前端·javascript·vue.js
月弦笙音1 小时前
【Promise.withResolvers】发现这个api还挺有用
前端·javascript·typescript
凡人程序员1 小时前
搭建简易版monorepo + turborepo
前端·javascript
不努力也不会混1 小时前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
Heo1 小时前
原来Webpack在大厂中这样进行性能优化!
前端·javascript·vue.js
涔溪2 小时前
Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器
前端·vue.js·axios
颜酱2 小时前
CLI 工具开发的常用包对比和介绍
前端·javascript·node.js
月下点灯2 小时前
🔄记住这张图,脑子跟着浏览器的事件循环(Event Loop)转起来了
前端·javascript·浏览器