解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題
element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊
解決方法
將以下樣式代碼添加到index.html、或app.vue中(必須是入口文件,起全局作用!)
body .el-table th.gutter{ display: table-cell!important; }
例如(app.vue):
<template> ? <div id="app"> ? ? <router-view></router-view> ? </div> </template>
<script> ? export default{ ? ? ?name: 'APP' ? } </script>
<style> ? /* 解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題 */ ? .el-table th.gutter{ ? ? display: table-cell!important; ? } </style>
<style lang="scss"> ? @import './styles/index.scss'; // 全局自定義的css樣式 </style>
el-table表頭和表格列寬不一樣問(wèn)題
直接上圖
解決辦法
1.網(wǎng)上找的辦法
將以下樣式代碼添加到index.html、或app.vue中(必須是入口文件,起全局作用!)
body .el-table th.gutter{ display: table-cell!important; }
2.自己新建css文件common.css,在文件中將上面樣式寫(xiě)入
/* 解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題 */ body .el-table th.gutter{ display: table-cell!important; }
3.在main.js文件中引入common.css文件
import '@/style/common.css'
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序詳解
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- 關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
- vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
- element-ui中頁(yè)面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決
- 關(guān)于Element-ui中Table表格無(wú)法顯示的問(wèn)題及解決
- 關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問(wèn)題解決
- Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
- Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
相關(guān)文章
Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼
這篇文章主要介紹了基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn)
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問(wèn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決
這篇文章主要介紹了Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01