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 需根据实际按钮数量修改

相关推荐
智能化咨询12 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang15 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼18 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
Nan_Shu_61410 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue