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

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

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>
相关推荐
待磨的钝刨43 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
九河云2 小时前
AWS账号注册费用详解:新用户是否需要付费?
服务器·云计算·aws
Lary_Rock2 小时前
RK3576 LINUX RKNN SDK 测试
linux·运维·服务器
幺零九零零3 小时前
【计算机网络】TCP协议面试常考(一)
服务器·tcp/ip·计算机网络
云飞云共享云桌面4 小时前
8位机械工程师如何共享一台图形工作站算力?
linux·服务器·网络
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js