Element UI/Plus中全局修改el-table默认样式的解决方案

 更新时间:2023年02月18日 12:04:21   作者:𝑱𝒆𝒓𝒓𝒚丶𝑯𝒖  
element ui官方封装好的el-table组件,好用是挺好用的,但不可避免的是默认的样式,下面这篇文章主要给大家介绍了关于Element UI/Plus中全局修改el-table默认样式的解决方案,需要的朋友可以参考下

起因

首先,Element 官网的表格样式默认是这样的:

  • el-table 无边框
  • el-table-column 行信息居左展示
  • el-table-column 当内容过长也没有溢出和显示tooltip的效果

如果我们需要改成这样:

那我们需要给el-tableel-table-column添加相应的props,即:

<el-table border>
  <el-table-column prop="xxx" label="xxx" align="center" show-overflow-tooltip />
  <el-table-column prop="xxx" label="xxx" align="center" show-overflow-tooltip />
  <el-table-column prop="xxx" label="xxx" align="center" show-overflow-tooltip />
  <!-- ... -->
</el-table>

这样,每个使用el-tableel-table-column的地方,都需要添加相应的props,这不仅增加我们的工作量,也让代码显得多余。

我们能否让每个组件的代码都简化成以下这样,并且仍然保留边框、居中和超出文本溢出的效果呢,即:

<el-table>
  <el-table-column prop="xxx" label="xxx" />
  <el-table-column prop="xxx" label="xxx" />
  <el-table-column prop="xxx" label="xxx" />
  <!-- ... -->
</el-table>

答案是可以的!

解决方案

在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)

在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

总结

到此这篇关于Element UI/Plus中全局修改el-table默认样式的解决方案的文章就介绍到这了,更多相关Element UI全局修改el-table默认样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue深拷贝的3种实现方式小结

    vue深拷贝的3种实现方式小结

    当使用同一个对象产生冲突时,可以使用lodash包,对该对象进行深拷贝,从而使操作的对象为不同的对象,这篇文章主要给大家介绍了关于vue深拷贝的3种实现方式,需要的朋友可以参考下
    2023-02-02
  • vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    这篇文章主要介绍了vue3发送验证码倒计时功能的实现(防止连点、封装复用),实现思路是点击发送验证码,验证码倒计时,校验手机号是否正常等一系列操作,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • vue将毫秒数转化为正常日期格式的实例

    vue将毫秒数转化为正常日期格式的实例

    今天小编就为大家分享一篇vue将毫秒数转化为正常日期格式的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解webpack编译多页面vue项目的配置问题

    详解webpack编译多页面vue项目的配置问题

    本篇文章主要介绍了详解webpack编译多页面vue项目的配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 解决vuex数据丢失问题

    解决vuex数据丢失问题

    本文主要介绍了解决vuex 数据丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    这篇文章主要为大家详细介绍了vue element实现表格增加删除修改数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue 2.0路由之路由嵌套示例详解

    vue 2.0路由之路由嵌套示例详解

    这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)

    el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)

    某些情况下,下拉框需要做触底加载,发请求,获取option的数据,下面给大家分享el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用),感兴趣的朋友参考下吧
    2024-02-02
  • vue中form表单禁用专用组件介绍

    vue中form表单禁用专用组件介绍

    这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue插槽原理与用法详解

    Vue插槽原理与用法详解

    这篇文章主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下
    2019-03-03

最新评论