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>

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