el-transfer穿梭框怎么做必填项验证？

Question

el-transfer穿梭框怎么做必填项验证？

Answer 1

我这边暂时采用的是添加‘required’类，出现星花标志为必填项。

<el-form-item class="required" label="分配角色">
   <el-transfer
    filterable 
    :filter-method="filterMethod"
    ref="myTransfer"
    v-model="roleListVal"
    :data="roleOptions"
    :titles="['角色列表', '现有角色']"
    :props="{key: 'roleId',label: 'name'}">
   </el-transfer>
</el-form-item>

样式

.required {
   .el-form-item__label:before {
      content: '*';
      color: #FF4949;
      margin-right: 4px;
   }      
 }

然后在提交整个数据的时候，判断一下穿梭框v-model绑定的数据

let params = {
    roleIds: this.roleListVal, // 绑定的数据
    userId: this.envForm.id
}
if (params.roleIds.length === 0) {
   this.$message({
      type: 'warning',
      message: '请分配角色！'
   });
  return false;
}

Answer 2

可以参考一下el-form自定义校验规则