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/

相关推荐
smileNicky14 分钟前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
waterHBO1 小时前
直接从图片生成 html
前端·javascript·html
EndingCoder1 小时前
JavaScript 时间转换:从 HH:mm:ss 到十进制小时及反向转换
javascript
互联网搬砖老肖1 小时前
React组件(一):生命周期
前端·javascript·react.js
小马哥编程2 小时前
React和Vue在前端开发中, 通常选择哪一个
前端·vue.js·react.js
HCl+NaOH=NaCl+H_2O2 小时前
Quasar组件 Carousel走马灯
javascript·vue.js·ecmascript
℘团子এ2 小时前
vue3中预览Excel文件
前端·javascript
shmily麻瓜小菜鸡2 小时前
在 Angular 中, `if...else if...else`
前端·javascript·angular.js
OK_boom5 小时前
React-useRef
javascript·react.js·ecmascript
未来之窗软件服务5 小时前
solidwors插件 开发————仙盟创梦IDE
前端·javascript·数据库·ide·仙盟创梦ide