業務需要前端根據使用者許可權動態顯示對應按鈕，直接把操作列的列寬寫死的話，在按鈕少的情況下不是那麼好看，所以想到了一個騷操作...

寫死寬度時是這樣的：

開始

給操作列繫結寬度屬性

: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表格操作列自適應列寬的文章就介紹到這了,更多相關elementui表格自適應列寬內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！