当前位置：首页 > article >正文

ELement plus 前端表单使用解读

article 2024/9/30 22:54:39

一、代码片段

<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-form ref="partnerRef" :model="form" :rules="rules" label-width="100px"> <el-form-item label="合作商名称" prop="partnerName"> <el-input v-model="form.partnerName" placeholder="请输入合作商名称" /> </el-form-item>
<el-form-item label="联系人" prop="contactPerson">
  <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
</el-form-item>

<el-form-item label="联系电话" prop="contactPhone">
  <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
</el-form-item>

<el-form-item label="创建时间" prop="contactPhone" v-if="form.id!=null">
  {{form.createTime}}
</el-form-item>

<el-form-item label="分成比例" prop="profitRatio">
  <el-input v-model="form.profitRatio" placeholder="请输入分成比例" />
</el-form-item>

<el-form-item label="账号" prop="account" v-if="form.id==null">
  <el-input v-model="form.account" placeholder="请输入账号" />
</el-form-item>

<el-form-item label="密码" prop="password" v-if="form.id==null">
  <el-input v-model="form.password" type="password" placeholder="请输入密码" />
</el-form-item>
</el-form>
<template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button>
  <el-button @click="cancel">取 消</el-button>

</div>
</template>
</el-dialog>
</div>
</template>

二、代码解读

（一）el-dialog 使用

<!-- 添加或修改合作商管理对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>

：Element UI 的对话框组件。
:title=“title”：对话框标题，绑定到 title 属性。
v-model=“open”：双向绑定对话框的打开状态。
width=“500px”：设置对话框宽度。
append-to-body：将对话框附加到 body 元素上，避免某些布局问题。

（二）el-form 使用

  <el-form ref="partnerRef" :model="form" :rules="rules" label-width="100px">

：Element UI 的表单组件。
ref=“partnerRef”：给表单组件一个引用名，方便后续操作。
:model=“form”：双向绑定表单数据模型。
:rules=“rules”：绑定表单验证规则。
label-width=“100px”：设置标签宽度。

（三）el-form-item、 el-input使用

    <el-form-item label="合作商名称" prop="partnerName">
      <el-input v-model="form.partnerName" placeholder="请输入合作商名称" />
    </el-form-item>

：表单项组件。
label=“合作商名称”：表单项的标签。
prop=“partnerName”：关联表单数据模型中的 partnerName 字段。
：输入框组件。
v-model=“form.partnerName”：双向绑定输入框的值。
placeholder=“请输入合作商名称”：输入框提示文字。

（四）v-if使用

    <el-form-item label="创建时间" prop="contactPhone" v-if="form.id!=null">
      {{form.createTime}}
    </el-form-item>

：表单项组件。
v-if=“form.id!=null”：只有当 form.id 不为空时才显示此表单项。
label=“创建时间”：表单项的标签。
prop=“contactPhone”：这里 prop 应该是笔误，应该改为 prop=“createTime”。
{{form.createTime}}：显示创建时间。