elementui表格中的列怎么實現自適應列寬

發布時間：2020-12-28 14:58:04

來源：億速云

閱讀：53

作者：Leah

這期內容當中小編將會給大家帶來有關elementui表格中的列怎么實現自適應列寬，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

開始

給操作列綁定寬度屬性:width="actionColWidth?

把操作列的所有按鈕用一個div套起來

class="action-col"

...

data里設置列寬初始值actionColWidth:?80,?//表格操作列寬度

在表格數據請求回來賦值給表格之后，執行計算寬度的操作

這里是用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);

});

上述就是小編為大家分享的elementui表格中的列怎么實現自適應列寬了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。

總結

以上是生活随笔為你收集整理的elementui表格宽度适应内容_elementui表格中的列怎么实现自适应列宽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。