element-ui使用问题总结

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这个方法可以清空表单的数据