动态table表格表单中添加条件判断校验

is me 熊瞎子

已于 2023-10-30 11:03:23 修改

阅读量353

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2023-10-30 10:59:12 首次发布

本文链接：https://blog.csdn.net/weixin_51600020/article/details/134114703

版权

文章讲述了在Vue的el-form-item组件中，如何使用计算属性和三元表达式动态设置rules属性，根据`isException`值来决定是否执行校验规则，提供了一个实例代码和建议的业务逻辑调整方式。

摘要由CSDN通过智能技术生成

el-form-item组件中使用三元表达式来动态设置:rules属性是无效的，因为:rules属性期望接收一个数组，而不是一个条件表达式。

要根据条件动态设置校验规则，可以通过编写一个计算属性来实现。你可以在Vue组件中添加一个计算属性，根据scope.row.isException的值返回对应的校验规则。请参考以下示例代码：

<template>
  <!-- ...其他代码 -->
  <el-table-column label="异常描述" align="center" width="180"> 
    <template #default="scope"> 
      <el-form-item
        size="small"
        :prop="'exceptionDescription' + scope.$index"
        :rules="getExceptionDescriptionRules(scope.row.isException)"
      > 
        <el-input v-model="scope.row.exceptionDescription" placeholder="" type="textarea" clearable :disabled="scope.row.isException === '0'"></el-input>
      </el-form-item>
    </template>
  </el-table-column> 
</template>

<script>
export default {
  // ...其他代码
  methods: {
    getExceptionDescriptionRules(isException) {
      if (isException === '0') {
        return [
          { required: true, message: '异常描述不能为空' }
          // 可以添加其他校验规则
        ];
      } else {
        return [];
      }
    }
  }
};
</script>

在这个示例中，我们定义了一个名为getExceptionDescriptionRules的方法，该方法根据isException的值返回对应的校验规则数组。如果isException等于0，则返回包含校验规则的数组（这里只添加了一个必填规则），否则返回一个空的数组，表示不需要进行校验。

通过使用方法来动态设置校验规则，可以实现根据条件进行校验的需求。可以根据自己的具体业务逻辑调整代码，并确保在Vue组件中正确引用计算属性和方法。