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>

最后做出来的效果图如下:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐