做worksheet的网站,短视频剪辑培训班速成,做企业网站的轻量级cms,新宫网站建设公司效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为… 效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为什么width paddingSpacing * btnCount * 2 1最后要加1获取按钮最大数量为什么是找类名为el-button--small而不是el-button 方法封装全局使用1, 新建formatBtnWidth.js2, 挂载到main.js3,页面内使用 测试demo暂未解决的问题首次进入页面, 表格会抖动一下 解决方法
1, 获取操作栏按钮容器, 拿到所有按钮的list 2, 遍历按钮, 获取某条数据中按钮list最大宽度 3, 返回所有按钮宽度间隙宽度
...el-table-column label操作 :widthformatBtnWidth//template slot-scope{ row }div classbtnList//el-button clickopenDialog(1, row) typeprimary sizesmall iconel-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).lengthif (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).lengthif (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 formatBtnWidth3,页面内使用
methods: {// 查询表格数据search(xxx,xxx){....xxx().then(res{//this.tableData res.data // 表格赋值this.$nextTick(() {this.formatBtnWidth this.$formatBtnWidth()})})}
}测试demo
测试demo已上传,点击前往下载
暂未解决的问题
首次进入页面, 表格会抖动一下
这就formatBtnWidth的初始值问题了, 默认填一个按钮的宽度(120px), 如果表格恰好是一个按钮, 就不会抖动, 如果表格是多个按钮,就会抖动一下 如果默认填0, 无论几个按钮都会抖动 所以我就不知道该怎么搞了, 有知道的大佬可以发表一下意见, 不过我感觉这也不算什么大问题哈.
