【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用

杨同学*

已于 2024-09-10 13:31:36 修改

阅读量2.9k

点赞数 87

文章标签： vue.js 前端 javascript elementui

于 2024-09-09 10:00:00 首次发布

本文链接：https://blog.csdn.net/m0_52539553/article/details/141929160

版权

在这里插入图片描述
效果图

权限a用户所看到的页面
权限b用户所看到的页面
权限c用户所看到的页面
以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题.

解决方法

1, 获取操作栏按钮容器, 拿到所有按钮的list
2, 遍历按钮, 获取某条数据中按钮list最大宽度
3, 返回所有按钮宽度+间隙宽度

...
 <el-table-column label="操作" :width="formatBtnWidth">
    //<template slot-scope="{ row }">
       <div class="btnList">
           //<el-button @click="openDialog(1, row)" type="primary" size="small" icon="el-icon-edit-outline">编 辑</el-button>
           //<el-button....
           .....
       </div>
    // </template>
 </el-table-column>
...
data(){
  return{
     formatBtnWidth: 120, // 也可以填0, 120是默认一个按钮的宽度
  }
}
....
methods: {
	// 查询表格数据
	search(xxx,xxx){
		....
		xxx().then(res=>{
			//this.tableData = res.data // 表格赋值
			this.$nextTick(() => {
               this.formatBtnWidth = this.getFormatBtnWidth()
            })
		})
	}
	// 自适应计算操作栏宽度
	getFormatBtnWidth(){
		 let width = 120 // 默认宽度
 		 let paddingSpacing = 5 // 默认边距
  		 let btnCount = 0 // 按钮数量
	     let btnDom = document.getElementsByClassName('btnList') // 获取操作栏按钮容器
	     if (btnDom.length) {
		    // [...btnDom]转数组
		    var btnDomArray = [...btnDom]
		    btnDomArray.forEach((v) => {
		      // 最大宽度
		      if (width < v.offsetWidth) width = v.offsetWidth
		      // 最大按钮数量
		      const buttons = v.getElementsByClassName('el-button--small').length
		      if (btnCount < buttons) btnCount = buttons
		    })
		    // 如果按钮数量大于2，宽度要加上边距
		    if (btnCount > 1) {
		      width += paddingSpacing * btnCount * 2 + 1
		    }
	   	}
	    return width
	}
}
...

.btnList {
  white-space: nowrap;
  display: inline-block;
}

解决过程中可能出现的问题

width赋值时为什么不放update()中

我感觉放表格赋值之后也可以, 因为如果你放update()里面调用, 无聊你在页面操作什么, 比如点击一下模态框之类的和表格无关的事情, 这个方法都会被执行, 感觉有点浪费, 所以放在了赋值之后, 当然, 这都是我的个人猜想.

btnDom为什么不能直接调用forEach

可以自己试一下, 调了会报错
打印btnDom出来看看
在这里插入图片描述
可以看到他是HTMLCollection格式的数组, 不清楚这是什么格式的, 百度一下看看, 解释如下:

解决方法如下:

第一种, 不转数组,不用forEach, 直接改为用for循环
for (let i = 0; i < btnDom.length; i++) {}

第二种, 使用es6方法转成数组后再使用forEach, 三种任选其一都可以
var btnDomArray = Array.prototype.slice.call(btnDom)
var btnDomArray = Array.from(btnDom)
var btnDomArray = [...btnDom]

为什么width += paddingSpacing * btnCount * 2 + 1最后要加1

加1是为了部分情况下, 按钮宽度计算不准确导致操作栏出现省略号…的问题. 看如下情况:
在这里插入图片描述
①是鼠标移到按钮容器中可以看到显示的宽度是193.34px
②是控制台打印的按钮容器宽度是193px, 与①相差了一点点, 但就是这一点点像素导致操作栏总宽度超出设定的宽度,从而出现③省略号…的问题
所以在width += paddingSpacing * btnCount * 2 + 1 多加1px,就不会出现省略号了.可能有更好的方法 ,但我目前只能想到这种方法.

获取按钮最大数量为什么是找类名为’el-button–small’而不是’el-button’

因为类名为el-button的按钮会夹杂其他的按钮,比如下图:
操作栏的删除按钮中还有一个模态框, 里面有两个按钮, 如果用el-button,会把这里面的按钮也算作操作栏按钮中, 实际上是不需要计算的
在这里插入图片描述
因为外层的三个按钮都有el-buttn-small类名,而且小弹窗中的按钮没有这个类名, 所以就可以以el-buttn-small来区分是否为操作栏的按钮了
如果小弹窗中的按钮也有el-buttn-small怎么办, 那就只能在按钮中再加一个自定义的类名了,获取按钮最大数量就用自定义的类名.

方法封装全局使用

1, 新建formatBtnWidth.js

// 格式化操作栏按钮宽度
export function formatBtnWidth() {
  let width = 120 // 默认宽度
  let paddingSpacing = 5 // 默认边距
  let btnCount = 0 // 按钮数量
  let btnDom = document.getElementsByClassName('btnList') // 获取操作栏按钮容器
  if (btnDom.length) {
    // [...btnDom]转数组
    var btnDomArray = [...btnDom]
    btnDomArray.forEach((v) => {
      // 最大宽度
      if (width < v.offsetWidth) width = v.offsetWidth
      // 按钮数量
      const buttons = v.getElementsByClassName('el-button--small').length
      if (btnCount < buttons) btnCount = buttons
    })
    // 如果按钮数量大于2，宽度要加上边距
    if (btnCount > 1) {
      width += paddingSpacing * btnCount * 2 + 1
    }
  }
  return width
}

2, 挂载到main.js

import { formatBtnWidth } from '@/util/formatBtnWidth'
Vue.prototype.$formatBtnWidth = formatBtnWidth

3,页面内使用

methods: {
	// 查询表格数据
	search(xxx,xxx){
		....
		xxx().then(res=>{
			//this.tableData = res.data // 表格赋值
			this.$nextTick(() => {
               this.formatBtnWidth = this.$formatBtnWidth()
            })
		})
	}
}