【el-table与el-popover连用，弹窗无法关闭】

最新推荐文章于 2024-07-17 20:50:59 发布

原创最新推荐文章于 2024-07-17 20:50:59 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #elementui

在el-table中，当el-popover与fixed属性结合使用时，点击弹出框的按钮无法关闭弹窗。原因是fixed属性会导致表格复制列并创建两个table，覆盖基础table，从而引发关闭问题。解决方案是移除列的fixed属性，即可正常关闭弹窗。

el-table与el-popover连用，弹窗无法关闭

问题背景
一、代码
二、页面效果
三、解决办法
- 2.原因
总结

问题背景

el-table中使用el-popover,点击弹出框中的取消和确定按钮无法关闭

一、代码

<template>
	<el-row :gutter="20">
		<el-col :xs="24" :sm="24" :md="24" :xl="24">
			<el-table :data="tableData" border :header-cell-style="{background:"#F5F6F7",border:"#F5F6F7",color:"#333333"}" highlight-current-row>
			<el-table-column prop="name" label="名字"></el-table-column>
			<el-table-column prop="age" label="年龄"></el-table-column>
			<el-table-column prop="adress" label="地址"></el-table-column>
			<el-table-column lable="操作" width="200px" fixed="right" align="center">
				<template slot-scope="scope">
					<el-popover
						:ref="scope.row.id"
						placement="top"
						widt="150px">
						<p>确定要进行删除吗？</p>
						 <div style="text-align: right; margin: 0">
						    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
						    <el-button type="primary" size="mini" @click="submit">确定</el-button>
  						</div>
					</el-popover>
				</template>
			<el-table-column>
			<el-table>
		</el-col>
	</el-row>
</template>
<script>
	export default {
		data(){
			return {
				tableData:[
				 {id:001,name:"老君",age:12,adress；‘北京’},
				 {id:002,name:"小黑",age:12,adress；‘北京’},
				 {id:003,name:"小白",age:12,adress；‘北京’},
				],
			},
			methods:{
				submit(params){
					this.$refs{params}.doClose()
					this.$notify({
						message:'删除成功',
						type:"success",
						duration:200
						
					})
			}
		}
	}
</script>