解決elementui表格操作列自適應(yīng)列寬

更新時間：2020年12月28日 12:02:41 作者：amao

這篇文章主要介紹了解決elementui表格操作列自適應(yīng)列寬，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

業(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實現(xiàn)方法

相關(guān)文章

Vue實現(xiàn)天氣預(yù)報功能
這篇文章主要為大家詳細介紹了Vue實現(xiàn)天氣預(yù)報功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue導(dǎo)入處理Excel表格功能步驟詳解
最近開發(fā)遇到一個點擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入在表格的需求,所以下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)入處理Excel表格功能步驟的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue實現(xiàn)移動端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue defineProperty使用教程
Vue通過Object.defineProperty來實現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀取（屬性中的getter和setter方法）實現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理
2023-01-01
vuex 動態(tài)注冊方法 registerModule的實現(xiàn)
這篇文章主要介紹了vuex 動態(tài)注冊方法 registerModule的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
graphQL在前端vue中使用實例代碼
這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
關(guān)于vue的語法規(guī)則檢測報錯問題的解決
在配置路有的時候，陸續(xù)出現(xiàn)了各種報錯其中最多的是一些寫法，例如空格，縮進，各種括號，這篇文章主要介紹了關(guān)于vue的語法規(guī)則檢測報錯問題的解決，非常具有實用價值，需要的朋友可以參考下
2018-05-05
vue為什么v-for的優(yōu)先級比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05