elementplus中table方法 element ui el-table

一、场景：项目后期

需求：需要让项目中所有的表格头部都能够实现拖拽改变宽度

element本身的border属性值就能解决这个问题，但是由于项目中使用el-table的地方过多，由于涉及修改地方过多，不想一一添加，查找一番找到两个解决方案:

解决一：私有化el-table组件

描述：私有化掉el-table组件 然后去改这个组件 组件内部进行调整。最后在项目中覆盖掉element的el-table组> 件。

缺点：当更新element-ui的版本后，还需要重写el-table。

优点：不用修改项目原来代码，毕竟使用到的地方近百个el-table。

对源码有抵触心理的，可以先通过这篇简单了解 # element-ui 的组件源码还能这么看：

1. 找到el-table的源码 node_module/element-ui/packages/table整个文件复制到项目中（不要被eslent检测到，尽可能少改动源码）
3. 修改依赖
   因为项目中使用Vue.use(ElementUI);将element组件全部注册，将代码中引入组件 element-ui/packages的代码注释掉（如果不注释掉会报错，直接引入node_module下element-ui/packages下的单个组件，可能内部代码在未显示引入全局Vue的情况下，不能直接使用Vue的checkbox等组件），默认直接使用Vue全局组件即可，以table.vue为例：



4. 
   
6. 添加逻辑代码
   一步步简略查看最终定位到 src/table.vue：



7. 在main.js中覆盖原el-table组件

解决二：修改引入组件的props值

  在Vue2中

import Vue from 'vue'
import { Table, TableColumn } from 'element-ui'

// 获取组件的props
const TableProps = Table.props
const TableColumnProps = TableColumn.props

// 修改默认props
// 全局el-table设置
TableProps.border.default = true // 边框
// 全局el-table-column设置
TableColumnProps.align.default = 'center' // 居中
TableColumnProps.showOverflowTooltip.default = true // 文本溢出

Vue.use(Table)
Vue.use(TableColumn)



import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
const TableProps = ElementUI.Table.props
TableProps.border={ type: Boolean, default: true } // 边框
Vue.use(ElementUI);

 在vue3中

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import { ElTable, ElTableColumn } from 'element-plus'

// 获取组件的props
const TableProps = Table.props
const TableColumnProps = TableColumn.props

// 修改默认props
// 全局el-table设置
TableProps.border = { type: Boolean, default: true } // 边框线
// 全局el-table-column设置
TableColumnProps.align = { type: String, default: 'center' } // 居中
TableColumnProps.showOverflowTooltip = { type: Boolean, default: true } // 文本溢出

const app = createApp(App)
app.use(ElementPlus)

这样只需要在全局设置一次，就可以在每个组件中生效，这样就可以少写很多代码了，同理我们也可以在全局设置其他组件的默认的props。
代码参考:
给所有使用el-table组件特定列添加统一事件及样式_AB教程网Element UI/Plus中全局修改el-table默认样式的解决方案_vue.js_脚本之家