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

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

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>
相关推荐
FrozenLove_G14 小时前
服务器内存和普通计算机内存在技术方面有什么区别?
服务器·常识
牧羊狼的狼16 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
江团1io017 小时前
深入解析TCP核心机制:连接管理、流量与拥塞控制
服务器·网络·tcp/ip
知白守黑26717 小时前
Ansible角色
运维·服务器·ansible
知识分享小能手18 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one18 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲18 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell18 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_4378309420 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮20 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端