表单验证、属性绑定(一个属性根据另一个属性有无进行操作)

表单验证 一个属性根据另一个属性有无进行操作(属性绑定)

1、问题描述

需求:表单里面后两个属性需要根据前面一个属性进行有无判断。如果前面属性没有输入值,则不需要进行操作;如果前面属性有输入值,则后面两个值都需要进行填入。即前面不选,则后必选。

包含:表单验证、属性绑定、整体表单验证

最后样式

js 复制代码
<el-form
    ref="ruleForm"
    :rules="formRules"
    :model="tableData"
    >
    <el-table
      border="true"
      :show-header="false"
      :data="tableData"
    >
      <el-table-column
        label="节点参数"
        prop=""
        align="center"
        min-width="150"
      >
        <template #default="scope">
          {{ tabelText.node_param }}
        </template>
      </el-table-column>
      <el-table-column
        prop="param"
        align="center"
        min-width="150"
      >
        <template #default="scope">
          <el-input v-model="scope.row.param" />
        </template>
      </el-table-column>
      <el-table-column
        label="参数值符号"
        prop=""
        align="center"
        min-width="150"
      >
        <template #default="scope">
          {{ tabelText.node_symbol }}
        </template>
      </el-table-column>
      <el-table-column
        prop="operate"
        align="center"
        min-width="150"
      >
        <template #default="scope">
          <el-form-item
            prop="operate"
            :rules="(scope.row.param && !scope.row.operate) ? [{required: true, message: '请输入参数值', trigger: 'blur'}]:[{required:false}]"
          >
            <el-select
              v-model="scope.row.operate"
              class="m-2"
              placeholder="Select"
              style="width:100px"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="参数值"
        prop=""
        min-width="150"
        align="center"
      >
        <template #default="scope">
          {{ tabelText.node_val }}
        </template>
      </el-table-column>
      <el-table-column
        prop="param_val"
        min-width="150"
        align="center"
      >
        <template #default="scope">
          <el-form-item
            prop="param_val"
            :rules="(scope.row.param && !scope.row.param_val) ? [{required: true, message: '请输入参数值', trigger: 'blur'}]:[{required:false}]"
          >
            <el-input v-model="scope.row.param_val" />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
 </el-form>

<script setup>
const ruleForm = ref(null)
// 表单验证
const formRules = ref({})

// 整个表单验证
const createJudgeForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      createView()
    } else {
      ElMessage({
        type: 'error',
        message: '表单验证失败'
      })
    }
  })
}
</script>
相关推荐
IT_陈寒4 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌8 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip14 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
tomcsdn4114 分钟前
SMTPman,smtp服务器高效邮件发送核心指南
服务器·邮件营销·邮件群发·smtp服务器·域名邮箱·邮件服务器·红人营销
知识都 知识都学杂了15 分钟前
VMware ESXi 不同版本下载
服务器
虚伪的空想家15 分钟前
HUAWEI A800I A2 aarch64架构服务器鲲鹏920开启虚拟化功能
linux·运维·服务器·显卡·npu·huawei·鲲鹏920
wayuncn17 分钟前
哈尔滨电商企业服务器托管方案
运维·服务器·数据库
馨谙19 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
D11_19 分钟前
在阿里云CentOS服务器上使用Certbot为Nginx配置SSL证书
服务器·阿里云·centos