el-form-item 中使用:rules判断的值如果为空会报错

在使用Element UI的`el-form-item`组件时，`:rules`属性用于定义该表单项的校验规则。如果`:rules`中的校验函数返回了一个错误信息，那么该表单项就会被认为是校验失败的。如果你在`el-form-item`中使用`:rules`时遇到了值为空就报错的问题，可能是因为规则定义错误或者没有正确处理空值的情况。

为了避免值为空时出现错误，可以在定义`:rules`的规则时加入对空值的判断。例如，你可以在规则中使用一个自定义的验证函数，并在该函数中对空值进行处理。下面是一个使用Vue和Element UI时可能出现的场景和示例代码：

<template>
  <el-form :model="ruleForm" ref="ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动链接" prop="link">
      <el-input v-model="ruleForm.link"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        link: ''
      }
    };
  },
  watch: {
    'ruleForm.name': {
      immediate: true,
      handler(newVal) {
        // 你可能需要在输入时即时校验
        this.validateField('name');
      }
    }
  },
  methods: {
    validateField(ruleName) {
      this.$refs.ruleForm.validateField(ruleName).then(() => {
        // 校验成功时的回调
      }).catch((e) => {
        // 校验失败时的回调
        console.log(e);
      });
    },
    validateForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 提交表单
        } else {
          // 校验失败
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 自定义校验函数
    checkName(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入活动名称'));
      } else {
        callback();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 初始化校验
      this.validateForm();
    });
  }
};
</script>

在上述代码中，我们定义了一个`checkName`函数，它会检查活动名称是否为空。如果为空，就返回一个错误信息，否则不返回任何内容（通过调用`callback()`来表示校验通过）。这个自定义的校验函数被添加到了`:rules`属性中。