這期內容當中小編將會給大家帶來有關elementui表格中的列怎么實現自適應列寬，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
開始
給操作列綁定寬度屬性
:width="actionColWidth < 80 ? 80 : actionColWidth"
把操作列的所有按鈕用一個div套起來
class="action-col"
<div class="action-col"> <el-button></el-button> ... </div>
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表格中的列怎么實現自適應列寬了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
