1、el-input@keyup事件不生效
【解决】
<el-input placeholder="请输入内容" v-model="content" clearable @keyup.enter.native="search"> </el-input>
<el-input placeholder="请输入内容" v-model="content" clearable @keyup.native="search"> </el-input>
以上,类似的键盘名还有:
.enter 、.tab 、.delete (捕获 “删除” 和 “退格” 键) 、.esc 、.space 、.up 、.down、.left 、.right
也可以用keyCode,比如
<input @keyup.13="search">
2、图片放大预览效果
代码如下:
<tr>
<td colspan="2">
<span class="name vercen">产品图片:</span>
<span>
<el-popover
v-for="(imgSrc, index) in imgs"
:key="index"
placement="top"
title=""
trigger="click"
>
<img :src="imgSrc" />
<img
class="litImg"
slot="reference"
:src="imgSrc"
:alt="imgSrc"
style="height: 68px;width: 100px"
/>
</el-popover>
</span>
</td>
</tr>
可以参考官方文档:https://element.eleme.cn/#/zh-CN/component/popover
trigger的值除了支持 hover 方式外,还支持 click,focus 和 manual;此处title的属性值设为"",即不显示标题。
3、使用v-for循环表单,给表单添加ref属性的时候,校验规则在校验的时候会报错,如下图:
会抛出一个this.$refs[("ruleForm" + i)].validate is not a function"的错误,然后,我打印了一下this.$refs,发现他的值其实是一个数组
console.log(this.$refs['ruleForm0']);
console.log(this.$refs['ruleForm0'].validate);
,对比了一下只有一个form表单的时候的数据
console.log(this.$refs["auditForm"]);
console.log(this.$refs["auditForm"].validate);
所以,再回过头来看上面通过v-for循环得到的表单,会发现validate方法是在this.$refs['ruleForm0'][0]中的一个属性
console.log(this.$refs['ruleForm0'][0].validate);
综上所述,校验v-for循环出来的表单,可以用:
submit(status) {
let f_count = 0;
for (let i = 0; i < this.checkItemsArr.length; i++) {
this.$refs[`ruleForm${i}`][0].validate(valid => {
if (!valid) {
f_count++;
}
});
}
if (f_count < 0) {
return;
}
let params = this.checkItemsArr;
params["status"] = status;
console.log("提交参数==>", params);
},
4、对于element的表单通过dialog控件进来,填写表单,关闭再次进来的时候发现表单内容依旧维持在上一次的状态中,解决方式是:
//页面加载进来的时候表单被还原初始状态
initForm() {
this.$nextTick(() => {
for (let i = 0; i < this.checkItemsArr.length; i++) {
this.$refs[`ruleForm${i}`][0].resetFields();
}
});
},
用resetFields这个方法可以清空表单的数据