element-ui多选表单验证

针对 element-ui 多选表单验证，可以使用自定义的校验规则，示例代码如下：

<el-form-item prop="selectList" label="多选列表">
  <el-select v-model="selectList" multiple placeholder="请选择">
    <el-option label="选项1" value="1"></el-option>
    <el-option label="选项2" value="2"></el-option>
    <el-option label="选项3" value="3"></el-option>
  </el-select>
  <el-form-item v-for="(item, index) in selectList" :key="index">
    <template #label></template>
    <template #default>
      <span>{{ item }}</span>
    </template>
  </el-form-item>
  <template #error>
    <span style="color: red;">请选择至少一项</span>
  </template>
</el-form-item>

<script>
export default {
  data() {
    return {
      selectList: []
    }
  },
  methods: {
    // 自定义校验规则
    validateSelectList(rule, value, callback) {
      if (value.length === 0) {
        callback(new Error('请选择至少一项'))
      } else {
        callback()
      }
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('表单验证通过')
        } else {
          console.log('表单验证失败')
        }
      })
    }
  },
  mounted() {
    this.$refs.form.validateSelectList = this.validateSelectList
  }
}
</script>

在上述代码中，我们通过 `prop` 属性指定了表单项对应的数据字段，然后在 `validateSelectList` 方法中编写了自定义的校验规则，该方法会被当作表单项对应的校验函数来调用。

然后我们在 `mounted` 钩子函数中将 `validateSelectList` 方法绑定到表单对象上，这样表单项就可以通过 `rules` 属性引用到这个校验函数了。