H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】el-transfer穿梭框怎么做必填项验证?

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

回答:

我这边暂时采用的是添加‘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;
}

回答:

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

本文地址:H5W3 » 【element-ui】el-transfer穿梭框怎么做必填项验证?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址