11-09 02:24 阅读 130

关注

elementui自定义表头input遇见的奇葩现象

第一个问题:无法关闭 弹出框

<el-table :data="tableData" style="width: 100%">
	<el-table-column prop="date" label="金额" width="180">
		<template slot="header">
			<el-popover placement="top" width="160" v-model="visible">
				<div style="text-align: right; margin: 0">
					<input class="input" v-model="infoValue" />
					<el-button size="mini" type="text" @click="visible = false">取消</el-button>
					<el-button type="primary" size="mini" @click="okHander">确定</el-button>
				</div>
				<span slot="reference">
					<span>修改金额</span>
					<i class="el-icon-edit"></i>
				</span>
			</el-popover>
		</template>
	</el-table-column>

	<el-table-column prop="name" label="姓名" width="180">
	</el-table-column>

	<el-table-column prop="address" label="地址">
	</el-table-column>
</el-table>

<script>
new Vue({
	el: '#app',
	data: function() {
		return {
			visible: false,
			infoValue: '',
			tableData: [{
				date: '10',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, ]
		}
	},
	methods: {
		okHander() {
			//无法清除输入框中的值
			this.infoValue=''
			// 关闭弹窗
			this.visible = false;
		},
	}
})
</script>复制代码

解决关闭弹窗办法

添加 ref="elpopoverRef"，通过ref去关闭
<el-popover placement="top" ref="elpopoverRef" width="160" v-model="visible">
	<div style="text-align: right; margin: 0">
		<input class="input" v-model="infoValue" />
		<el-button size="mini" type="text" @click="visible = false">取消</el-button>
		<el-button type="primary" size="mini" @click="okHander">确定</el-button>
	</div>
	<span slot="reference">
		<span>修改金额</span>
		<i class="el-icon-edit"></i>
	</span>
</el-popover>

okHander() {
	// 关闭弹窗 失败
	// this.visible = false;
	//关闭弹窗 成功
	this.$refs.elpopoverRef.doClose()
},复制代码

无法清空input中的值，通过this.infoValue=''

解决清除输入框中的值

<el-popover ref="elpopoverRef" placement="top" width="160" v-model="visible">
	<div style="text-align: right; margin: 0">
		<input ref="inputIdDemo" class="input" v-model="infoValue" />
		<el-button size="mini" type="text" @click="visible = false">取消</el-button>
		<el-button type="primary" size="mini" @click="okHander">确定</el-button>
	</div>
	<span slot="reference">
		<span>修改金额</span>
		<i class="el-icon-edit"></i>
	</span>
</el-popover>


okHander() {
	// 关闭弹窗
	this.$refs.elpopoverRef.doClose();
	// 清除input框中的值，这样清除值会成功
	this.$refs.inputIdDemo.value=""
	//这样清除值会失败的哈
	this.infoValue=''；
},复制代码

尾声

这个案例主要产生了两个奇怪的现象。
第一个就是通过this.visible = false;
无法关闭弹窗。
后来通过查询文档，通过
this.$refs.elpopoverRef.doClose();这样可以关闭弹窗
无法清除input框中的值。
最初我使用this.infoValue=''失败了
紧接着使用vue中的强制刷新但是失败了~
然后还使用了v-if来销毁input还是失败了
最后我只用ref重置value的值。没有想到竟然成功了
其实使用document.getElementById('xx').value=""
也可以将input中的值清空
所以：至于为什么会这样。我觉得应该是element-ui中的一个bug
遇见问题，多使用几种方式也许会有不一样的结果

作者：我的div丢了肿么办
链接：https://juejin.cn/post/7028203127954210824