解決elementui表格操作列自適應(yīng)列寬
更新時間：2020年12月28日 12:02:41 作者：amao
這篇文章主要介紹了解決elementui表格操作列自適應(yīng)列寬，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
業(yè)務(wù)需要前端根據(jù)用戶權(quán)限動態(tài)顯示對應(yīng)按鈕，直接把操作列的列寬寫死的話，在按鈕少的情況下不是那么好看，所以想到了一個騷操作...
寫死寬度時是這樣的：
開始
給操作列綁定寬度屬性
:width="actionColWidth < 80 ? 80 : actionColWidth"
把操作列的所有按鈕用一個div套起來
class="action-col"
<div class="action-col"> <el-button></el-button> ... </div>
data里設(shè)置列寬初始值
actionColWidth: 80, //表格操作列寬度
在表格數(shù)據(jù)請求回來賦值給表格之后，執(zhí)行計算寬度的操作
這里是用jq獲取表格第一行的全部按鈕，然后把每個按鈕的寬度加起來，就是操作列的寬度。
不用jq的話用原生js也行。
如果表格每一行的操作按鈕是不一樣的，那么就獲取每一行操作按鈕的總寬度，然后取最大的就行。這里沒有這個需求，就不寫了。
getClerkList(params)
.then((res) => {
this.tableData = res.rows;
this.$nextTick(() => {
// 給表格操作列寬度多出25px，否則顯示不完整
let width = 25;
// 使用jq遍歷表格第一行操作列里的每一個按鈕
$(".action-col")
.eq(0)
.children(".el-button")
.each(function () {
// 把每個按鈕的寬度加起來
width += $(this).outerWidth(true);
});
// 把計算好的總寬度賦值給操作列寬
this.actionColWidth = width;
});
})
.catch((err) => {
console.error(err);
});
看一下效果
沒有按鈕時：
有一個按鈕：
有兩個按鈕：
有三個按鈕：
到此這篇關(guān)于解決elementui表格操作列自適應(yīng)列寬的文章就介紹到這了,更多相關(guān)elementui表格自適應(yīng)列寬內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
這篇文章主要介紹了vue實現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇Vue實現(xiàn)頁面添加水印功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據(jù)javascript AST抽象語法樹生成render函數(shù)字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家介紹了Vue項目的打包方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實現(xiàn)錨點跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項目中定義全局變量、函數(shù)的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11