Vue3+Elemnt Plus 表单组件的用法

<template>
  <div class="db-form-box">
    <el-form ref="dbFormRef"
             :model="dbform"
             :rules="dbRules"
             label-width="120px"
    >
      <el-form-item label="名称" style="width: 320px" prop="name">
        <el-input v-model="dbform.name"></el-input>
      </el-form-item>
      <el-form-item label="别名" style="width: 320px" prop="alias">
        <el-input v-model="dbform.alias"></el-input>
      </el-form-item>
      <el-form-item label="数据库驱动" prop="driver">
        <el-select v-model="dbform.driver" placeholder="请选择数据库驱动">
          <el-option v-for="item in driverTypes" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据库连接" prop="url">
        <el-input v-model="dbform.url"></el-input>
      </el-form-item>
      <el-form-item label="用户" style="width: 320px" prop="user">
        <el-input v-model="dbform.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" style="width: 320px" prop="password">
        <el-input v-model="dbform.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleTestConn(dbFormRef)">测试连接</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
	import {ref, reactive, getCurrentInstance} from 'vue'
	import {succesMsg, warnMsg} from "../../util/msgBox";
	import * as dbInfo from './DbInfo'

	export default {
		name: "CreateDbConn",
		setup() {
			const driverTypes = reactive(dbInfo.driverTypes);
			const {proxy} = getCurrentInstance();
			const dbFormRef = ref(null);
			const dbform = reactive({
				name: '',
				alias: '',
				driver: '',
				url: '',
				user: '',
				password: '',
			});


			/**
			 * 自定义校验函数, 要定义在dbRules 前面(有疑问)
			 */
			const validateDriver = (rule, value, callback) => {
				//console.log("validateDriver");
				if (value === '') {
					return callback(new Error('数据库驱动不可为空'));
				}
				callback();
			};
			const validateName = (rule, value, callback) => {
				//console.log("validateName");
				if (value === '') {
					return callback(new Error('名称不可为空'));
				}
				callback();
			};
			const validateUrl = (rule, value, callback) => {
				//console.log("validateName");
				if (value === '') {
					return callback(new Error('数据库连接不可为空'));
				}
				callback();
			};
			const validateUser = (rule, value, callback) => {
				//console.log("validateName");
				if (value === '') {
					return callback(new Error('用户不可为空'));
				}
				callback();
			};
			const validatePassword = (rule, value, callback) => {
				//console.log("validateName");
				if (value === '') {
					return callback(new Error('密码不可为空'));
				}
				callback();
			};


			/**
			 * 表单校验规则
			 * @type {UnwrapNestedRefs<{driver: {validator: *, trigger: string}[]}>}
			 */
			const dbRules = reactive({
				name: [{validator: validateName, trigger: 'blur'}],
				driver: [{validator: validateDriver, trigger: 'blur'}],
				url: [{validator: validateUrl, trigger: 'blur'}],
				user: [{validator: validateUser, trigger: 'blur'}],
				password: [{validator: validatePassword, trigger: 'blur'}],
			});

			/**
       * 测试数据库连接
			 * @param dbFormEl
			 */
			const handleTestConn = (dbFormEl) => {
				if (!dbFormEl) return;
				dbFormEl.validate((valid) => {
					console.log(valid);
					if (valid) {
						proxy.$http.post('/datasource/testConn', {
							driver: dbform.driver,
							url: dbform.url,
							user: dbform.user,
							password: dbform.password
						}).then(res => {
							if (res.code === 0) {
								succesMsg(res.message);
							} else {
								warnMsg(res.message);
							}
						})
					}
				});
			};


			const handleSave = () => {

			};


			return {
				driverTypes,
				dbFormRef,
				dbform,
				dbRules,
				handleTestConn,
				handleSave,
			}
		}
	}
</script>

<style scoped>
  .db-form-box {
    width: 600px;
  }
</style>

注意dbFormRef 和 dbform 的区别:

dbFormRef 是在 setup 中通过 const dbFormRef = ref(null); 定义的, 指定在表单的 ref 属性上;

dbForm 是表单的填报数据, 通过 reactive 定义, 使其成为响应式数据.