el-input为空时提交，边框变红

在C知道中，当用户提交某个表单且其中包含某些必填字段为空时，我们会将对应的表单输入框的边框变红，以提示用户该字段不能为空。具体实现的方法如下：

首先，在我们的表单组件中，我们需要针对每个必填字段添加一个相应的验证规则。例如，在 el-input 组件中，我们可以使用 required 属性让该组件成为必填项：

<el-input v-model="username" placeholder="请输入用户名" required></el-input>

然后，在用户提交表单时，我们需要检查每个必填字段是否已经被填写。如果检测到某个必填字段为空，我们就可以将对应的输入框的边框设置为红色。可以使用以下代码来实现这一功能：

submitForm() {
  // 检查必填项是否已经填写
  if (!this.username) {
    // 如果用户名未填写，则将对应的输入框边框变为红色
    document.querySelector('#username input').style.borderColor = 'red';
    return;
  }
  
  // 如果所有必填项都已填写，则提交表单
  ...
}

注意，在上述代码中，我们使用了 document.querySelector 来获取对应的输入框，并将其边框颜色设为红色。这里的 '#username input' 是一个 CSS 选择器，表示选择 id 为 username 的元素下的 input 子元素。这样，我们就可以很方便地找到对应的输入框并设置其边框颜色了。

当然，如果我们希望在用户填写后立即检测出必填项为空，而不是在用户提交表单时才进行检测，那么还可以使用 el-form 组件的 validate 方法，例如：

<el-form ref="form" :model="form" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  ...
</el-form>

this.$refs.form.validate((valid) => {
  if (valid) {
    // 表单验证通过，可以提交表单了
    ...
  } else {
    // 表单未通过验证
    // 可以在这里针对每个输入框进行边框变红等操作
  }
})

这样，就可以在用户填写后立即检测出必填项为空，而不必等到用户提交表单时才进行检测了。