快捷導(dǎo)航

Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案

更新時(shí)間：2023年02月18日 12:04:21 作者：??????????丶????

element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下

起因

首先，Element 官網(wǎng)的表格樣式默認(rèn)是這樣的：

el-table 無邊框
el-table-column 行信息居左展示
el-table-column 當(dāng)內(nèi)容過長(zhǎng)也沒有溢出和顯示tooltip的效果

如果我們需要改成這樣：

那我們需要給el-table和el-table-column添加相應(yīng)的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>

這樣，每個(gè)使用el-table和el-table-column的地方，都需要添加相應(yīng)的props，這不僅增加我們的工作量，也讓代碼顯得多余。

我們能否讓每個(gè)組件的代碼都簡(jiǎn)化成以下這樣，并且仍然保留邊框、居中和超出文本溢出的效果呢，即：

<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

// 修改默認(rèn)props
// 全局el-table設(shè)置
TableProps.border.default = true // 邊框
// 全局el-table-column設(shè)置
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

// 修改默認(rèn)props
// 全局el-table設(shè)置
TableProps.border = { type: Boolean, default: true } // 邊框線
// 全局el-table-column設(shè)置
TableColumnProps.align = { type: String, default: 'center' } // 居中
TableColumnProps.showOverflowTooltip = { type: Boolean, default: true } // 文本溢出

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

這樣只需要在全局設(shè)置一次，就可以在每個(gè)組件中生效，這樣就可以少寫很多代碼了，同理我們也可以在全局設(shè)置其他組件的默認(rèn)的props。

總結(jié)

到此這篇關(guān)于Element UI/Plus中全局修改el-table默認(rèn)樣式的解決方案的文章就介紹到這了,更多相關(guān)Element UI全局修改el-table默認(rèn)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue深拷貝的3種實(shí)現(xiàn)方式小結(jié)
當(dāng)使用同一個(gè)對(duì)象產(chǎn)生沖突時(shí)，可以使用lodash包，對(duì)該對(duì)象進(jìn)行深拷貝，從而使操作的對(duì)象為不同的對(duì)象,這篇文章主要給大家介紹了關(guān)于vue深拷貝的3種實(shí)現(xiàn)方式,需要的朋友可以參考下
2023-02-02
vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用)
這篇文章主要介紹了vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用),實(shí)現(xiàn)思路是點(diǎn)擊發(fā)送驗(yàn)證碼，驗(yàn)證碼倒計(jì)時(shí)，校驗(yàn)手機(jī)號(hào)是否正常等一系列操作，本文通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-01-01
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解webpack編譯多頁(yè)面vue項(xiàng)目的配置問題
本篇文章主要介紹了詳解webpack編譯多頁(yè)面vue項(xiàng)目的配置問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
解決vuex數(shù)據(jù)丟失問題
本文主要介紹了解決vuex?數(shù)據(jù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue 2.0路由之路由嵌套示例詳解
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-05-05
el-select自定義指令實(shí)現(xiàn)觸底加載分頁(yè)請(qǐng)求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請(qǐng)求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實(shí)現(xiàn)觸底加載分頁(yè)請(qǐng)求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧
2024-02-02
vue中form表單禁用專用組件介紹
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue插槽原理與用法詳解
這篇文章主要介紹了Vue插槽原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js插槽內(nèi)容、具名插槽、作用域插槽等相關(guān)原理與使用方法,需要的朋友可以參考下
2019-03-03