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/

相关推荐
ziyue7575几秒前
vue修改element-ui的默认的class
前端·vue.js·ui
程序定小飞1 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
星秀日2 小时前
JavaWeb--Ajax
前端·javascript·ajax
BumBle2 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app
嫂子的姐夫2 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99993 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行3 小时前
脚手架学习
前端·javascript·学习
地方地方3 小时前
手写JavaScript 深拷贝
前端·javascript
二十雨辰4 小时前
vite性能优化
前端·vue.js
明月与玄武4 小时前
浅谈 富文本编辑器
前端·javascript·vue.js