element的table通过后台获取功能权限控制之后的列表宽度

最新推荐文章于 2024-04-11 16:16:12 发布

原创最新推荐文章于 2024-04-11 16:16:12 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js

前端同时被 3 个专栏收录

20 篇文章

订阅专栏

javascript

20 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍了一种在Vue框架中，根据后台获取的功能权限动态调整列表宽度的方法。通过遍历DOM元素，计算按钮组中按钮数量最多的那一组的总宽度，以此来确定列表的宽度，确保在权限控制下列表显示的美观性和合理性。

vue通过后台获取功能权限控制之后的列表宽度

export function getWidth() {
  if (document.getElementsByClassName('btn-group').length <= 0) return 0;
  let maxIndex = 0;
  for(let i=0;i<document.getElementsByClassName('btn-group').length;i++) {
    let currentLength = document.getElementsByClassName('btn-group')[i].getElementsByTagName('button').length;
    if(currentLength > maxIndex) maxIndex = i;
  }
  let buttons = document.getElementsByClassName('btn-group')[maxIndex].getElementsByTagName('button');
  let twidth = 0;
  for (let i = 0; i < buttons.length; i++) {
    twidth += buttons[i].clientWidth;
  }
  return twidth + 20 * (buttons.length - 1) + (buttons.length > 1?10:20);
}

适用于table中获取控制权限之后的宽度