el-table操作栏按钮过多 增加展开/收起功能

是的 如图所示有那么一条数据 列表操作栏的按钮七八个 小屏笔记本啥数据项也别看了 就剩下个固定列大刺刺的占着整个页面

解决方法:

javascript 复制代码
	<el-table-column :width="tableToggle ? 600 : 300" label="操作栏" align="center" header-align="center" fixed="right">
      <template slot-scope="scope">
          <el-button size="mini" type="primary">编辑</el-button>
          <el-button size="mini" type="info">详情</el-button>
        <div v-show="tableToggle" class="table-toggle">
          <el-button size="mini" type="primary">下载</el-button>
          <el-button size="mini" type="warning">上传</el-button>
          <el-button size="mini" type="success">恢复</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </div>
        <el-button size="mini" type="text" @click="tableToggle = !tableToggle">{{ tableToggle ? '收起' : '展开' }}
          <i :class="tableToggle ? 'el-icon-caret-left' : 'el-icon-caret-right'"></i>
        </el-button>
      </template>
    </el-table-column>

data里:

javascript 复制代码
 tableToggle: false,

css样式

javascript 复制代码
<style lang="scss">  
 .table-toggle {
    display: inline-block;
    margin-left: 4px;
  }
  .toggle-btn span{
    font-size: 12px;
  }
</style>

实现效果:

这里的动态宽度600 300 需根据实际按钮数量修改

相关推荐
海绵宝龙1 天前
Vue 中的 Diff 算法
前端·vue.js·算法
zhougl9961 天前
vue中App.vue和index.html冲突问题
javascript·vue.js·html
袁煦丞 cpolar内网穿透实验室1 天前
无需公网 IP 也能全球访问本地服务?cpolar+Spring Boot+Vue应用实践!
vue.js·spring boot·tcp/ip·远程工作·内网穿透·cpolar
浩泽学编程1 天前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js
狗哥哥1 天前
Vue 3 插件系统重构实战:从过度设计到精简高效
前端·vue.js·架构
巾帼前端1 天前
前端对用户因果链的优化
前端·状态模式
不想秃头的程序员1 天前
Vue3 中 Lottie 动画库的使用指南
前端
jenemy1 天前
🚀 这个 ElDialog 封装方案,让我的代码量减少了 80%
vue.js·element
幽络源小助理1 天前
SpringBoot+Vue雅苑小区管理系统源码 | Java物业项目免费下载 – 幽络源
java·vue.js·spring boot
锐湃1 天前
手写agp8自定义插件,用ASM实现路由跳转
java·服务器·前端