整理使用 element-ui 开发时遇到的问题（包含“摘抄”其他开发人员开发遇到的问题 😁）

1、去除 el-input 组件 type=”number”输入框聚焦时的上下箭头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 设置全局 */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
.clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
.clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
.clear-number-input.el-input {
  -moz-appearance: textfield;
}
.clear-number-input.el-input input[type="number"] {
  -moz-appearance: textfield;
}

2、el-input 输入框正则限制，绑定值未更新

输入框仅支持数字

1
2
3
4
5
<el-input
  v-model="form.num"
  placeholder="请输入数字"
  @keyup.native="form.num=form.num.replace(/[^\d.]/g,'')"
></el-input>

3、el-form 回车刷新页面（触发了表单默认的提交行为）

1
2
3
4
5
6
7
8
9
10
<el-form inline @submit.native.prevent>
  <el-form-item label="订单号">
    <el-input
      v-model="query.orderNo"
      :placeholder="输入订单号查询"
      clearable
      @keyup.enter.native="enterInput"
    />
  </el-form-item>
</el-form>

4、el-table固定列最后一行显示不完全、表头与内容错位

1
2
3
4
5
6
7
8
.el-table__fixed-right {
  height:100% !important;
}

// 全局设置 表头内容错位
.el-table--scrollable-y .el-table__body-wrapper {
 overflow-y: overlay !important;
}

5、表单校验只其中一个字段

仅校验手机号码（如果需要多个参数，将参数改为数组形式即可。）

1
2
3
4
5
this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // do something
  }
})

6、el-table跨分页多选

1
2
3
<el-table row-key="id">
  <el-table-column type="selection" reserve-selection></el-table-column>
</el-table>

7、el-table内嵌el-input focus失效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-table>
  <el-table-column label="名称">
    <template>
      <el-input ref="inputRef" />
    </template>
  </el-table-column>
</el-table>

// 无效
this.$refs['inputRef'].focus()
this.$refs['inputRef'][0].focus()
this.$refs['inputRef'].$el.children[0].focus()

// 有效
<el-input id="inputRef" />
document.getElementById('inputRef').focus()

8、el-dialog 的 destroy-on-close 属性设置无效

1
2
<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>