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

杨同学*

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

阅读量3.4k

点赞数 89

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

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

本文链接：https://blog.youkuaiyun.com/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.