ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解
更新時(shí)間：2024年01月25日 10:01:35 作者：香菜啵子欸
這篇文章給大家介紹了ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
一、安裝插件
npm install v-fit-columns --save
二、入口文件引入插件
import Vue from 'vue'; import Plugin from 'v-fit-columns'; Vue.use(Plugin);
三、 示例
- 添加v-fit-columns；
- 添加class-name="leave-alone"表示這一列不受v-fit-columns影響（即不進(jìn)行自適應(yīng)）；
<template>
<el-table
v-fit-columns
ref='table'
:data="tableData"
style="width: 100%">
<el-table-column
class-name="leave-alone"
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
class-name="leave-alone"
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}]
}
}
}
</script>
四、注意點(diǎn)
- 使用v-fit-columns后可能導(dǎo)致表頭錯(cuò)位
解決辦法：
// 使用
this.$nextTick(() => {
this.$refs.table.doLayout(); // 解決表格錯(cuò)位
});
// 或者
this.$forceUpdate();
// 自行實(shí)驗(yàn)下是否能解決表頭錯(cuò)位問題
- 使用v-fit-columns后使用fixed可能導(dǎo)致表頭錯(cuò)位；
解決辦法：
不使用fixed，其他辦法自行查閱資料；
到此這篇關(guān)于ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解的文章就介紹到這了,更多相關(guān)ElementUI el-table列寬自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
ant-design-vue導(dǎo)航菜單a-menu的使用解讀
這篇文章主要介紹了ant-design-vue導(dǎo)航菜單a-menu的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3.0數(shù)據(jù)響應(yīng)式原理詳解
這篇文章主要介紹了Vue3.0數(shù)據(jù)響應(yīng)式原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
在Vue中,有兩種類型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來學(xué)習(xí)一下Vue中自定義指令的用法吧2023-08-08
Vue3實(shí)現(xiàn)動(dòng)態(tài)切換Menu的示例代碼
本文介紹了在Vue3項(xiàng)目中使用頂部導(dǎo)航欄和側(cè)邊欄,通過頂部導(dǎo)航控制側(cè)邊欄的生成,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
Vue如何實(shí)現(xiàn)pptx在線預(yù)覽
通過PPTXjs插件,實(shí)現(xiàn)PPTX文件在線預(yù)覽,需下載PPTXjs,將其引入HTML頁面,并編寫相應(yīng)的HTML和JS代碼,如果是移動(dòng)端還需調(diào)整div大小,這是一種便捷的前端PPTX轉(zhuǎn)HTML技術(shù),適合網(wǎng)頁展示使用2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
解決Vue響應(yīng)式數(shù)據(jù)已獲取而視圖不更新的問題
這篇文章主要介紹了解決Vue響應(yīng)式數(shù)據(jù)已獲取而視圖不更新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08