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

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

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>

最后做出来的效果图如下：