el‐form - daniel-qa/Vue GitHub Wiki

el-form

#

prop 屬性的作用

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="用戶名" prop="username">
    <el-input v-model="form.username" />
  </el-form-item>
  <el-form-item label="密碼" prop="password">
    <el-input type="password" v-model="form.password" />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>
  • prop="username" 和 prop="password"：

這樣設置的 prop 值會使得對應的 form.username 和 form.password 欄位參與表單的驗證與數據收集。

  • rules,中可以設置相應的驗證規則，像是要求 username 為必填。
const rules = {
  username: [{ required: true, message: '用戶名是必填的', trigger: 'blur' }],  
  targets: [{ required: true, validator: checkTargets, trigger: "blur" }], // 自定義驗證
  data: [{ validator: checkData, trigger: "blur" }],
};

  • blur : 事件意味著當用戶移開輸入框（即輸入框失去焦點）時，會觸發驗證。

  • 在 Vue 的 v-model 中綁定的數據模型可以與 el-form-item 配合，prop 屬性會讓該字段參與到表單的數據收集和驗證中。

如果不加 prop，則表單的項目不會參與驗證或數據收集，但仍然可以顯示和操作。

  • 自定義驗證範例
// 从父组件注入的接收名单和更新方法
const column3Items = inject("column3Items", ref([])); // 接收名單

// 自定义验证方法
function checkTargets(rule, value, callback) {
    
    if (!column3Items.value || column3Items.value.length === 0) {
        callback(new Error('接收名單不能為空！')); // 验证失败，返回错误
    } else {
        callback(); // 验证通过
    }
}

< el-form> 主要是 Element Plus 的表單組件，用來管理表單數據、校驗規則及樣式。

範例 1

<el-form ref="ruleFormRef" :model="noticeForm" :rules="rules" label-width="120px">
  • ref="ruleFormRef"

ref 綁定了一個 Vue 參考 (ref 變數)，用來存儲 這個 DOM 元素。

在 setup 中，這通常會這樣聲明：

const ruleFormRef = ref()

這樣我們可以在 ruleFormRef.value 上調用表單的方法，如：

ruleFormRef.value.validate(valid => {
  if (valid) {
    console.log("表單驗證通過")
  } else {
    console.log("表單驗證失敗")
  }
})
  • :model="noticeForm"

:model 代表表單數據模型，noticeForm 是一個 reactive 變數，存儲表單的數據。

當用戶在表單內輸入內容時，noticeForm 會即時更新，例如：

const noticeForm = reactive({
  srvAdr: '',
  title: '',
  body: '',
  targets: '',
  sender: '',
})

這樣，當用戶在 中輸入時，noticeForm.title 會自動更新。

  • :rules="rules"

rules 是表單的驗證規則，會應用在對應的 < el-form-item prop="xxx"> 上。

例如：

const rules = reactive({
  title: [{ required: true, message: '請輸入標題', trigger: 'blur' }],
  body: [{ required: true, message: '請輸入通知內容', trigger: 'blur' }]
})

這樣，如果標題欄位 (title) 沒輸入內容，會顯示「請輸入標題」的錯誤提示。

  • 總結

管理表單數據（透過 :model="noticeForm"）

提供驗證規則（透過 :rules="rules"）

支援表單方法（如 validate()，透過 ref="ruleFormRef"）

範例 2

<!-- 標題-->
<el-form-item label="標題" prop="title">
    <el-input style="width: 500px;" v-model="noticeForm.title" placeholder="請輸入標題" />
</el-form-item>

<!-- 內容-->
<el-form-item label="內容" prop="body">
    <el-input style="width: 500px;" :rows="6" type="textarea" v-model="noticeForm.body" placeholder="請輸入通知內容" />
</el-form-item>

  • el-input 的 type : 可以 text、textarea、password

  • prop="title" 讓該表單項目與 rules 中 title 的驗證規則相對應，並且與 noticeForm.title 進行雙向數據綁定。

    當用戶提交表單時，表單會根據 prop 和 rules 來進行該欄位的驗證。

el-form,el-input,el-form-item三个组件。el-form是必要的,对布局有影响，el-form-item是做为关联表单元素的文字，el-input便是我们的输入框了。布局已经预设，用这三个便可以是最基本的表单。

  • 基礎簡單的表单结构：
<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  username: '',
  password: ''
});

const submitForm = () => {
  console.log('提交数据:', form);
};
</script>

修改 el-form-item

<style scoped>
.el-form-item__label {
  font-size: 18px; /* 设置字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 标签颜色 */
}
</style>

常用属性

属性 说明 类型 默认值
label 表单项的标签文本 string —
label-width 标签区域的宽度，优先级高于 <el-form> 的 label-width string/number —
prop 验证字段的属性名，用于表单验证和提示信息绑定 string —
required 是否显示必填字段的红色星号 boolean false
error 自定义错误信息，设置后会显示该信息而非表单验证结果 string —
show-message 是否显示校验结果信息 boolean true

blur 的含义

当用户从输入框离开（即失去焦点）时触发校验。

适用场景

通常适用于要求用户完成输入后，再进行校验的字段。例如：

必填项

输入长度限制 格式校验（如邮箱、手机号）

範例

<template>
  <el-form :model="form" label-width="80px">
    <!-- 標題 -->
    <el-form-item label="標題">
      <el-input v-model="form.title" placeholder="輸入標題"></el-input>
    </el-form-item>

    <!-- 內容 -->
    <el-form-item label="內容">
      <el-input v-model="form.content" placeholder="輸入內容"></el-input>
    </el-form-item>

    <!-- 按鍵 -->
    <el-form-item label="按鍵">
      <el-input v-model="form.buttonName" placeholder="按鍵名稱"></el-input>
      <el-input v-model="form.buttonUrl" placeholder="按鍵URL" style="margin-top: 10px;"></el-input>
    </el-form-item>

    <!-- 提交按鈕 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  title: '',
  content: '',
  buttonName: '',
  buttonUrl: ''
});

const submitForm = () => {
  console.log('提交數據:', form.value);
  alert('提交成功！');
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 15px;
}
</style>

常用設定

label-width

類型: string | number

作用: 設定標籤的固定寬度，單位可以是像素(px)或百分比(%)。

範例:

<el-form :model="form" label-width="100px">
  <el-form-item label="Email" prop="email">
    <el-input v-model="form.email" />
  </el-form-item>
</el-form>
⚠️ **GitHub.com Fallback** ⚠️