ElementPlus 遇到的问题

ElForm里面只有一个input时按回车会刷新整个页面原因:当el-form表单里面只有一个input时，回车会触发表单提交的默认事件

W3C 标准中有如下规定：这并不是只有ElementPlus会遇到此问题 When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。

解决:阻止表单提交默认事件

<el-form @submit.native.prevent>
...
</el-form>
//jsx写法
import { withModifiers } from 'vue';
<ElForm inline onSubmit={[withModifiers(() => { }, ['native', 'prevent'])]}>
</ElForm>

ElInput没有回车事件,onChange事件在内容没有变化时无法触发解决:vue语法可以使用事件修饰符enter来解决 jsx语法无法使用修饰符(写一个自定义指令,按enter触发)

//指令
export default {
  mounted: (el, binding) => {
    el.onkeyup = (e) => {
      const inputValue = el.getElementsByClassName('el-input__inner')[0].value
      if (e.keyCode === 13 && inputValue.trim()) {
        binding.value()
      }
    }
  },
};
//使用 v-keyup={触发事件}
<ElInput v-keyup={getDataSource}/>

element-plus的指令v-loading问题

 //通常情况在使用template模板的情况下 v-loading可直接使用 但是在jsx中使用是会报错
 <template>
    <div v-loading='true'></div>
 </template>
 //解决:main.js 注册ElLoading
 import { ElLoading } from "element-plus";
 app.use(ElLoading)

ElementPlus 遇到的问题 ​

ElementPlus 遇到的问题