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