如何对 el-table列表项内的 form表单元素使用自定义规则校验

最新推荐文章于 2024-07-29 11:19:04 发布

原创

最新推荐文章于 2024-07-29 11:19:04 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#el-form验证 #自定义表单验证 #rules #dataRule #计算属性进行表单验证

本文详细介绍了一种用户多部门多职位权限管理方案，通过树形菜单选择机构，结合单选按钮确认主职单位，确保用户至少有一个主单位。利用Vue组件如el-cascader和el-select动态显示职位，避免同部门重复职位冲突，实现灵活的权限配置。

业务需求：

用户多部门多职位，但有一个主单位，主单位必须，但职位不必须，每个单位下包含不同职位，同一用户在同一单位下只能拥有一个同一职位

左侧机构结构是树形菜单，对应机构表，使用el-casecader级联选择器（带radio单选框形式的），右侧职位结构是普通列表，使用el-select 选择器，根据左侧选择的项动态显示右边展示的内容，并验证是否与已选择项冲突。

主职项使用el-radio单选按钮，与上下行唯一冲突，默认进入页面就有第一行内容并且主职选中。因为用户至少有一个部门，这里为了直接设置了第一项不可删除且为必选，是否主职自己设定，但设定为主职的项也不可删除，除非取消主职设定，主职务所在单位即为主单位，主单位必需，主职务不必需。

可使用增加按钮添加新的机构和职位行...

表单绑定验证rule：:rules="dataRule"

<el-form :model="dataForm"
             :rules="dataRule"
             @keyup.enter.native="dataFormSubmitHandle()"
             label-width="120px"
             ref="dataForm"
             :inline="true"
             size="mini">

table部分代码：

<el-col :span="22">
      <!--机构职位-->
      <div style="height:30px;margin:0px 0px 10px 30px;width:800px;">
        <span style="disply:block;float:left;font-weight:bold;color:#5CACEE;">职位</span>
        <el-button @click="addJob()" style="float:right;" type="primary" size="mini" :disabled="info">新增</el-button>
      </div>
</el-col>
<el-table :data="dataForm.deptJobList"
                  border
                  height="280px"
                  v-loading="slaveJobListLoading">
          <el-table-column header-align="center" align="center" min-width="80" label="机构">
            <template slot-scope="scope">
              <el-form-item :prop="'deptJobList[' + scope.$index + '].deptId'"
                            label-width="0px"
                            :inline-message="true">
                <el-cascader 
                             :key="caseCaderKey"
                             :options="depts"            
                             :disabled="info"
                             @change="deptChange(scope.row.deptId,scope.$index)"
                             v-model="scope.row.deptId"
                             :props="{ checkStrictly: true, value