element UI中table操作栏更多按钮展示与折叠的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI中table操作栏更多按钮展示与折叠的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、然后给大家看下动态图

element UI中table操作栏更多按钮展示与折叠的实现

2、解决思路：

一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框，后面看了下elementUI文档上有个组件可以利用，那就是Popover 弹出框

废话不多说，直接上代码吧

html代码块：

<el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
	<el-table-column type="selection" width="55"></el-table-column>
	<el-table-column v-for="(item,index) in tableLabel" :key="index" :prop="item.prop" :width="item.width" :label="item.label"></el-table-column>
	<el-table-column label="操作" width="350" align="center">
		<template slot-scope="scope">
			<el-button type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			<el-button type="success" size="mini" @click="openDown(scope.$index, scope.row)">开门</el-button>
			<el-button type="warning" size="mini" @click="peiZhi(scope.$index, scope.row)">配置</el-button>
			<el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			<el-popover placement="left" width="50" trigger="click">
				<el-button type="text" size="mini" @click="chongQi(scope.$index, scope.row)">重启</el-button>
				<el-button type="text" size="mini" @click="chongZhi(scope.$index, scope.row)">重置</el-button>
				<el-button type="text" size="mini" @click="jinYong(scope.$index, scope.row)">禁用</el-button>
				<el-button type="text" size="mini" @click="shengJi(scope.$index, scope.row)">升级</el-button>
				<el-button type="text" size="mini" @click="riZhi(scope.$index, scope.row)">日志</el-button>
				<el-button type="text" size="mini" @click="jianKang(scope.$index, scope.row)">健康</el-button>
				<el-button type="text" size="mini" @click="changKai(scope.$index, scope.row)">常开</el-button>
				<el-button slot="reference">更多</el-button>
			</el-popover>
		</template>
	</el-table-column>
</el-table>