「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
接着上篇文章「 快上车！Vite + Vue 3 + tsx + element plus 实现表单配置（上）」继续写，上篇文章实现了使用jsx和Typescript在编辑器里有语法提示
接下里我选用的是element plus这个UI库来搭建管理后台，然后示例怎样搭建表单
引用element plus库
首先安装element plus库
npm install element-plus --save
然后在入口文件引入element plus库，我是选择了全局引用的方式，当然你也可以在各组件里按需引入
import { createApp } from 'vue';
// 引入 element plus
import ElementPlus from 'element-plus';
// 引入 element plus 的样式
import 'element-plus/dist/index.css';
import App from './App.vue';
const app = createApp(App);
// 挂在到 Vue 实例上
app.use(ElementPlus);
app.mount('#app');
表单配置的实践
这里我是使用了<script setup>的语法糖以及tsx的写法，发现没有一篇具体的文章是介绍如何实现，很多都是SFC单组件文件的写法，至于为什么选用tsx，上篇已经介绍了，这里就不重复累述了
element plus库的官方demo都是使用SFC的写法，刚刚开始的转成tsx写法的时候觉得很是无从下手，但是添加了@vitejs/plugin-vue-jsx插件后，还是很容易把SFC语法去改成JSX的
大概我们要实现这么一个简单的表单，可以输入名称和年龄两个字段，以及对他们进行校验
效果图
完整的代码文件
// form.tsx
import { defineComponent, reactive } from 'vue'
type Info = {
name: string;
age: number;
}
const Index = defineComponent({
setup() {
const state = reactive({
form: {
name: '',
age: 0
} as Info
})
const rule = {
name: [
{
required: true,
message: '请输入名称',
trigger: 'blur',
},
],
age: [
{
required: true,
message: '请输入年龄',
trigger: 'blur',
},
]
}
// jsx的写法
return () => (
<el-form model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
<el-form-item label="名称" prop="name">
<el-input v-model={state.form.name} maxlength="10"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model={state.form.age} maxlength="10"></el-input>
</el-form-item>
</el-form>
)
}
})
注意事项
声明表单的值要注意初始化，不然会失去响应性
例如刚刚开始声明state时是这样子的，没有初始化form对象里的值，那么后续输入input的值时，form对象里面的值是监听不了的，已经失去了响应性
// 错误的
const state = reactive({
form: {} as Info
})
正确的应该声明好form里面的值
// 正确的
const state = reactive({
form: {
name: '',
age: 0
} as Info
})
校验表单失效的坑
form里绑定的值没对
这是一个粗心大意的bug，以为form里传值也是v-model，没仔细看是model，这个问题定位了大半天，还是得仔细看文档
// 错误的
<el-form v-model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
</el-form>
// 正确的
<el-form model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
</el-form>
如果写错了你就会喜提以下这个报错
ElementPlusError: [Form] model is required for validate to work! 没错，他就是提示要传model这个props
el-form-item 缺少 prop
如果缺少prop，会导致校验规则没生效
// 正确的，需要有 prop
<el-form-item label="名称" prop="name">xx</el-form-item>
还有一个额外的小提示
如果是SFC写法要注意返回值不要失去响应性，因此返回需要调用toRefs方法，以免解构的时候对象失去响应性
<template>
{{form.name}}
</template>
<script lang='ts'>
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
form: {
name: '',
age: 0
}
})
return {
...toRefs(state)
}
}
}
</script>
结语
以上是我使用Vite + Vue 3 + tsx + element plus实现表单配置的实践，希望能对大家有帮助～如果能获得一个大大的赞❤作为鼓励会十分感激😄！！大家也可以多在评论区交流讨论哦，谢谢啦～
更多文章推荐：
