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

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

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>
相关推荐
over69711 分钟前
JavaScript恋爱物语:当代码学会送花,对象字面量也能当红娘!
javascript
tiantian_cool16 分钟前
HarmonyOS 开发环境配置指南 - macOS 版
前端
写不来代码的草莓熊35 分钟前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
tiantian_cool42 分钟前
正确的 .gitignore 配置
前端·github
三小河43 分钟前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
踩着两条虫1 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
孙同学_1 小时前
【Linux篇】软链接vs硬链接:Linux文件系统中的两种引用机制
linux·运维·服务器