若依二次开发 前端菜鸟级经验分享

推荐视频

【若依框架】15分钟玩转若依二次开发_哔哩哔哩_bilibili

在这个视频导入的前端代码的基础上，下面是我做项目时收获的一些小知识

(哦对，还有下面这个element官网，没接触过这个的可以玩一玩，挺有意思的）

组件 | Element

代码基础知识补充

前端代码几乎修改都在这个页面：

这个代码中：

这四个部分分别对应了页面中的：

1对应查询部分：

2对应四个按钮部分：

3对应查看列表的部分

4对应新增按钮和修改按钮的页面

表单校验：如对联系电话输入框限制

 得到的效果是这样的：

基础代码：

<el-form-item label="联系电话" prop="contactnumber">
       <el-input v-model="form.contactnumber" placeholder="请输入联系电话"/>
</el-form-item>

加限制后的代码：

 <el-form-item label="联系电话" prop="contactnumber">
      <el-input v-model="form.contactnumber" placeholder="请输入联系电话"></el-input>
 </el-form-item>

export default {
  data() {
    return {
        form: {
        contactnumber: ''
      },
        rules: {
        contactnumber: [
          { required:true,message: '联系电话不能为空', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '联系电话必须为数字', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '联系电话必须为11位数字', trigger: 'blur' }
        ]
}

总结一下，也就是改三个地方，input那里、form和rules那里，非常需要注意的是，【若依框架】15分钟玩转若依二次开发_哔哩哔哩_bilibili的视频里导出的代码自带form和rules。。。我刚开始没注意到，自己又新加了form和rules，导致结果一直运行不出来。。。好笨。。

如果不想要联系电话前面的红色的星号，把required:true,删了就行了

级联选择器el-cascader

以文化程度为例，效果展示：

代码如下：

<template>
  <el-form-item label="文化程度" prop="educationlevel">
    <el-cascader
      v-model="form.educationlevel"
      :options="educationOptions"
      placeholder="请选择文化程度"
      clearable
      size="small"
    ></el-cascader>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        educationlevel: []
      },
      educationOptions: [
        {
          value: '0',
          label: '研究生',
          children: [
            { value: '1', label: '研究生毕业' },
            { value: '2', label: '研究生肄业' }
          ]
        },
        {
          value: '3',
          label: '大学本科(简称“大学”)',
          children: [
            { value: '4', label: '大学毕业' },
            { value: '5', label: '相当大学毕业' },
            { value: '6', label: '大学肄业' }
          ]
        },
        {
          value: '7',
          label: '大学专科和专科学校',
          children: [
            { value: '8', label: '专科毕业' },
            { value: '9', label: '相当专科毕业' },
            { value: '10', label: '专科肄业' }
          ]
        },
        {
          value: '11',
          label: '中等专业学校(简称“中专”)或中等技术学校(简称“中技”)',
          children: [
            { value: '12', label: '中专毕业' },
            { value: '13', label: '中技毕业' },
            { value: '14', label: '相当中专或中技毕业' },
            { value: '15', label: '中专或中技肄业' }
          ]
        },
        {
          value: '16',
          label: '技工学校',
          children: [
            { value: '17', label: '技工学校毕业' },
            { value: '18', label: '技工学校肄业' }
          ]
        },
        {
          value: '19',
          label: '高中',
          children: [
            { value: '20', label: '高中毕业' },
            { value: '21', label: '职业高中毕业' },
            { value: '22', label: '农业高中毕业' },
            { value: '23', label: '相当高中毕业' },
            { value: '24', label: '高中肄业' }
          ]
        },
        {
          value: '25',
          label: '初中',
          children: [
            { value: '26', label: '初中毕业' },
            { value: '27', label: '职业初中毕业' },
            { value: '28', label: '农业初中毕业' },
            { value: '29', label: '相当初中毕业' },
            { value: '30', label: '初中肄业' }
          ]
        },
        {
          value: '31',
          label: '小学',
          children: [
            { value: '32', label: '小学毕业' },
            { value: '33', label: '相当小学毕业' },
            { value: '34', label: '小学肄业' }
          ]
        },
        {
          value: '35',
          label: '文盲或半文盲'
        }
      ]
    };
  }
};
</script>

如果想要下图这种前面有个小圆圈的，加一句 filterable change-on-select就好了

代码如下：

<el-form-item label="健康状况" prop="healthstatus">
        <el-cascader v-model="form.healthstatus" :options="healthOptions" placeholder="请选择健康状况" clearable size="small"
          filterable change-on-select></el-cascader>
      </el-form-item>

获取创建人、创建时间、修改人、修改时间

效果如图：

修改代码步骤如下：

这时 你会发现时间格式有问题，用下面的代码修改一下：

<el-table-column label="记录创建时间" align="center" prop="creatortime">
        <template slot-scope="scope">
          {{ new Date(scope.row.creatortime).toLocaleString('zh-CN', { hour12: false }) }}
        </template>
      </el-table-column>

标签页

 效果如图：

代码如下：

  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-tabs value="personalInfo">
        <!-- 个人信息标签页 -->
        <el-tab-pane label="个人信息" name="personalInfo">
          <el-form ref="formpersonalInfo" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="员工编码" prop="employeecode">
              <el-input v-model="form.employeecode" placeholder="请输入员工编码" />
            </el-form-item>
            <el-form-item label="离退起始日期" prop="retirementstartdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.retirementstartdate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择离退起始日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原单位" prop="originalunit">
              <el-input v-model="form.originalunit" placeholder="请输入原单位" />
            </el-form-item>
            <el-form-item label="单位分类" prop="unitclassification">
              <el-input v-model="form.unitclassification" placeholder="请输入单位分类" />
            </el-form-item>
            <el-form-item label="原科室" prop="originaldepartment">
              <el-input v-model="form.originaldepartment" placeholder="请输入原科室" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="身份证号" prop="identitynumber">
              <el-input v-model="form.identitynumber" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="dateofbirth">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.dateofbirth" type="date"
                value-format="yyyy-MM-dd" placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="未知的性别" value="未知的性别"></el-option>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
                <el-option label="未说明的性别" value="未说明的性别"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="ethnicity">
              <el-select v-model="form.ethnicity" placeholder="请选择民族">
                <el-option label="汉族" value="汉族"></el-option>
                <el-option label="蒙古族" value="蒙古族"></el-option>
                <el-option label="回族" value="回族"></el-option>
                <el-option label="藏族" value="藏族"></el-option>
                <el-option label="维吾尔族" value="维吾尔族"></el-option>
                <el-option label="苗族" value="苗族"></el-option>
                <el-option label="彝族" value="彝族"></el-option>
                <el-option label="壮族" value="壮族"></el-option>
                <el-option label="布依族" value="布依族"></el-option>
                <el-option label="朝鲜族" value="朝鲜族"></el-option>
                <el-option label="满族" value="满族"></el-option>
                <el-option label="侗族" value="侗族"></el-option>
                <el-option label="瑶族" value="瑶族"></el-option>
                <el-option label="白族" value="白族"></el-option>
                <el-option label="土家族" value="土家族"></el-option>
                <el-option label="哈尼族" value="哈尼族"></el-option>
                <el-option label="哈萨克族" value="哈萨克族"></el-option>
                <el-option label="傣族" value="傣族"></el-option>
                <el-option label="黎族" value="黎族"></el-option>
                <el-option label="傈僳族" value="傈僳族"></el-option>
                <el-option label="佤族" value="佤族"></el-option>
                <el-option label="畲族" value="畲族"></el-option>
                <el-option label="高山族" value="高山族"></el-option>
                <el-option label="拉祜族" value="拉祜族"></el-option>
                <el-option label="水族" value="水族"></el-option>
                <el-option label="东乡族" value="东乡族"></el-option>
                <el-option label="纳西族" value="纳西族"></el-option>
                <el-option label="景颇族" value="景颇族"></el-option>
                <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
                <el-option label="土族" value="土族"></el-option>
                <el-option label="达斡尔族" value="达斡尔族"></el-option>
                <el-option label="仫佬族" value="仫佬族"></el-option>
                <el-option label="羌族" value="羌族"></el-option>
                <el-option label="布朗族" value="布朗族"></el-option>
                <el-option label="撒拉族" value="撒拉族"></el-option>
                <el-option label="毛难族" value="毛难族"></el-option>
                <el-option label="仡佬族" value="仡佬族"></el-option>
                <el-option label="锡伯族" value="锡伯族"></el-option>
                <el-option label="阿昌族" value="阿昌族"></el-option>
                <el-option label="普米族" value="普米族"></el-option>
                <el-option label="塔吉克族" value="塔吉克族"></el-option>
                <el-option label="怒族" value="怒族"></el-option>
                <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
                <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
                <el-option label="鄂温克族" value="鄂温克族"></el-option>
                <el-option label="德昂族" value="德昂族"></el-option>
                <el-option label="保安族" value="保安族"></el-option>
                <el-option label="裕固族" value="裕固族"></el-option>
                <el-option label="京族" value="京族"></el-option>
                <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
                <el-option label="独龙族" value="独龙族"></el-option>
                <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
                <el-option label="赫哲族" value="赫哲族"></el-option>
                <el-option label="门巴族" value="门巴族"></el-option>
                <el-option label="珞巴族" value="珞巴族"></el-option>
                <el-option label="基诺族" value="基诺族"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康状况" prop="healthstatus">
              <el-cascader v-model="form.healthstatus" :options="healthOptions" placeholder="请选择健康状况" clearable
                size="small"></el-cascader>
            </el-form-item>
            <el-form-item label="政治面貌">
              <el-radio-group v-model="form.politicalstatus">
                <el-radio label="1">请选择字典生成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="入党时间" prop="partyjoiningdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.partyjoiningdate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择入党时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="文化程度" prop="educationlevel">
              <el-input v-model="form.educationlevel" placeholder="请输入文化程度" />
            </el-form-item>
            <el-form-item label="宗教信仰" prop="religiousbelief">
              <el-input v-model="form.religiousbelief" placeholder="请输入宗教信仰" />
            </el-form-item>
            <el-form-item label="婚姻状况">
              <el-radio-group v-model="form.maritalstatus">
                <el-radio label="1">请选择字典生成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="籍贯" prop="nativeplace">
              <el-input v-model="form.nativeplace" placeholder="请输入籍贯" />
            </el-form-item>
            <el-form-item label="户籍所在地" prop="registeredresidence">
              <el-input v-model="form.registeredresidence" placeholder="请输入户籍所在地" />
            </el-form-item>
            <el-form-item label="户口类别" prop="residencetype">
              <el-select v-model="form.residencetype" placeholder="请选择户口类别">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="现详细居住地址" prop="currentaddress">
              <el-input v-model="form.currentaddress" placeholder="请输入现详细居住地址" />
            </el-form-item>
            <el-form-item label="住房面积" prop="housingarea">
              <el-input v-model="form.housingarea" placeholder="请输入住房面积" />
            </el-form-item>
            <el-form-item label="社区" prop="community">
              <el-input v-model="form.community" placeholder="请输入社区" />
            </el-form-item>
            <el-form-item label="所属支部" prop="partybranch">
              <el-input v-model="form.partybranch" placeholder="请输入所属支部" />
            </el-form-item>
            <el-form-item label="通信地址" prop="mailingaddress">
              <el-input v-model="form.mailingaddress" placeholder="请输入通信地址" />
            </el-form-item>
            <!-- <el-form-item label="联系电话" prop="contactnumber">
            <el-input v-model="form.contactnumber" placeholder="请输入联系电话" />
          </el-form-item> -->
            <el-form-item label="联系电话" prop="contactnumber">
              <el-input v-model="form.contactnumber" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postalcode">
              <el-input v-model="form.postalcode" placeholder="请输入邮政编码"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>

          </el-form>
        </el-tab-pane>

        <!-- 工作详情标签页 -->
        <el-tab-pane label="工作详情" name="workDetails">
          <el-form ref="formworkDetails" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="参加工作日期" prop="workstartdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.workstartdate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择参加工作日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="认定工龄" prop="recognizedserviceyears">
              <el-input v-model="form.recognizedserviceyears" placeholder="请输入认定工龄" />
            </el-form-item>
            <el-form-item label="服务管理二级单位" prop="secondaryserviceunit">
              <el-input v-model="form.secondaryserviceunit" placeholder="请输入服务管理二级单位" />
            </el-form-item>
            <el-form-item label="服务管理三级单位" prop="tertiaryserviceunit">
              <el-input v-model="form.tertiaryserviceunit" placeholder="请输入服务管理三级单位" />
            </el-form-item>

            <el-form-item label="发放待遇依据时间" prop="benefitbasisdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.benefitbasisdate" type="date"
                value-format="yyyy-MM-dd" placeholder="选择发放待遇依据时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="内部退养办理时间" prop="internalretirementdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.internalretirementdate"
                type="date" value-format="yyyy-MM-dd" placeholder="选择内部退养办理时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="解除劳动关系时间" prop="employmentterminationdate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.employmentterminationdate"
                type="date" value-format="yyyy-MM-dd" placeholder="选择解除劳动关系时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="原职务" prop="originalposition">
              <el-input v-model="form.originalposition" placeholder="请输入原职务" />
            </el-form-item>
            <el-form-item label="原职称" prop="originaltitle">
              <el-input v-model="form.originaltitle" placeholder="请输入原职称" />
            </el-form-item>
            <el-form-item label="原工种" prop="originaltrade">
              <el-input v-model="form.originaltrade" placeholder="请输入原工种" />
            </el-form-item>
            <el-form-item label="职业资格等级" prop="professionalqualificationlevel">
              <el-input v-model="form.professionalqualificationlevel" placeholder="请输入职业资格等级" />
            </el-form-item>
            <el-form-item label="职级，离退后享受待遇级别" prop="ranktype">
              <el-select v-model="form.ranktype" placeholder="请选择职级，离退后享受待遇级别">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="人员类别" prop="currentstaffcategory">
              <el-input v-model="form.currentstaffcategory" placeholder="请输入人员类别" />
            </el-form-item>
            <el-form-item label="原人员类别" prop="originalstaffcategory">
              <el-input v-model="form.originalstaffcategory" placeholder="请输入原人员类别" />
            </el-form-item>
            <el-form-item label="人员类别变化时间" prop="staffcategorychangedate">
              <el-date-picker clearable size="small" style="width: 200px" v-model="form.staffcategorychangedate"
                type="date" value-format="yyyy-MM-dd" placeholder="选择人员类别变化时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="人员类别变化说明" prop="staffcategorychangeexplanation">
              <el-input v-model="form.staffcategorychangeexplanation" placeholder="请输入人员类别变化说明" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 银行信息标签页 -->
        <el-tab-pane label="银行信息" name="bankInfo">
          <el-form ref="formbankInfo" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="收款人" prop="payee">
              <el-input v-model="form.payee" placeholder="请输入收款人" />
            </el-form-item>
            <!-- <el-form-item label="开户银行1" prop="bank1">
          <el-input v-model="form.bank1" placeholder="请输入开户银行1" />
        </el-form-item> -->
            <el-form-item label="昆仑银行" prop="bank1account">
              <el-input v-model="form.bank1account" placeholder="请输入昆仑银行账号" />
            </el-form-item>
            <!-- <el-form-item label="开户银行2" prop="bank2">
          <el-input v-model="form.bank2" placeholder="请输入开户银行2" />
        </el-form-item> -->
            <el-form-item label="建设银行" prop="bank2account">
              <el-input v-model="form.bank2account" placeholder="请输入建设银行账号" />
            </el-form-item>
            <!-- <el-form-item label="开户银行3" prop="bank3">
          <el-input v-model="form.bank3" placeholder="请输入开户银行3" />
        </el-form-item> -->
            <el-form-item label="邮政储蓄银行" prop="bank3account">
              <el-input v-model="form.bank3account" placeholder="请输入邮政储蓄银行账号" />
            </el-form-item>
            <!-- <el-form-item label="开户银行4" prop="bank4">
          <el-input v-model="form.bank4" placeholder="请输入开户银行4" />
        </el-form-item> -->
            <!-- <el-form-item label="开户银行4账号" prop="bank4account">
          <el-input v-model="form.bank4account" placeholder="请输入开户银行4账号" />
        </el-form-item>
        <el-form-item label="开户银行5" prop="bank5">
          <el-input v-model="form.bank5" placeholder="请输入开户银行5" />
        </el-form-item>
        <el-form-item label="开户银行5账号" prop="bank5account">
          <el-input v-model="form.bank5account" placeholder="请输入开户银行5账号" />
        </el-form-item> -->
          </el-form>
        </el-tab-pane>

        <!-- 享受待遇页 -->
        <el-tab-pane label="银行享受待遇信息" name="xiangshoudaiyu">
          <el-form ref="formxiangshoudaiyu" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="慰问金" prop="condolencemoneystatus">
              <el-switch v-model="form.condolencemoneystatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="降温费" prop="coolingfeestatus">
              <el-switch v-model="form.coolingfeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="健康疗养费" prop="healthcarefeestatus">
              <el-switch v-model="form.healthcarefeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="书报费" prop="newspaperfeestatus">
              <el-switch v-model="form.newspaperfeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="电话费" prop="telephonefeestatus">
              <el-switch v-model="form.telephonefeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="祝寿" prop="birthdaystatus">
              <el-switch v-model="form.birthdaystatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="物业费补贴" prop="propertyfeesubsidystatus">
              <el-switch v-model="form.propertyfeesubsidystatus" active-text="正常发放" inactive-text="停发"
                :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="采暖费补贴" prop="heatingsubsidystatus">
              <el-switch v-model="form.heatingsubsidystatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="采暖费帮扶" prop="heatingsupportstatus">
              <el-switch v-model="form.heatingsupportstatus" active-text="正常发放" inactive-text="停发" :active-value="true"
                :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

            <el-form-item label="遗属生活费" prop="survivorlivingexpensestatus">
              <el-switch v-model="form.survivorlivingexpensestatus" active-text="正常发放" inactive-text="停发"
                :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>

          </el-form>
        </el-tab-pane>
      </el-tabs>

      <!-- <el-form-item label="慰问金 发放状态">
          <el-radio-group v-model="form.condolencemoneystatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="降温费 发放状态">
          <el-radio-group v-model="form.coolingfeestatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="健康疗养费 发放状态">
          <el-radio-group v-model="form.healthcarefeestatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="书报费 发放状态">
          <el-radio-group v-model="form.newspaperfeestatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电话费 发放状态">
          <el-radio-group v-model="form.telephonefeestatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="祝寿 发放状态">
          <el-radio-group v-model="form.birthdaystatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="物业费补贴 发放状态">
          <el-radio-group v-model="form.propertyfeesubsidystatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="采暖费补贴 发放状态">
          <el-radio-group v-model="form.heatingsubsidystatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
      
        <el-form-item label="采暖费帮扶 发放状态">
          <el-radio-group v-model="form.heatingsupportstatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="遗属生活费 发放状态">
          <el-radio-group v-model="form.survivorlivingexpensestatus">
            <el-radio label="正常发放">正常发放</el-radio>
            <el-radio label="停发">停发</el-radio>
          </el-radio-group>
        </el-form-item> -->

      <!-- <el-form-item label="备用字符串1" prop="bakstr01">
          <el-input v-model="form.bakstr01" placeholder="请输入备用字符串1" />
        </el-form-item>
        <el-form-item label="备用字符串2" prop="bakstr02">
          <el-input v-model="form.bakstr02" placeholder="请输入备用字符串2" />
        </el-form-item>
        <el-form-item label="备用字符串3" prop="bakstr03">
          <el-input v-model="form.bakstr03" placeholder="请输入备用字符串3" />
        </el-form-item>
        <el-form-item label="备用字符串4" prop="bakstr04">
          <el-input v-model="form.bakstr04" placeholder="请输入备用字符串4" />
        </el-form-item>
        <el-form-item label="备用字符串5" prop="bakstr05">
          <el-input v-model="form.bakstr05" placeholder="请输入备用字符串5" />
        </el-form-item>
        <el-form-item label="备用字符串6" prop="bakstr06">
          <el-input v-model="form.bakstr06" placeholder="请输入备用字符串6" />
        </el-form-item>
        <el-form-item label="备用字符串7" prop="bakstr07">
          <el-input v-model="form.bakstr07" placeholder="请输入备用字符串7" />
        </el-form-item>
        <el-form-item label="备用字符串8" prop="bakstr08">
          <el-input v-model="form.bakstr08" placeholder="请输入备用字符串8" />
        </el-form-item>
        <el-form-item label="备用字符串9" prop="bakstr09">
          <el-input v-model="form.bakstr09" placeholder="请输入备用字符串9" />
        </el-form-item>
        <el-form-item label="备用字符串10" prop="bakstr10">
          <el-input v-model="form.bakstr10" placeholder="请输入备用字符串10" />
        </el-form-item>
        <el-form-item label="创建人" prop="creator">
          <el-input v-model="form.creator" placeholder="请输入创建人" />
        </el-form-item>
        <el-form-item label="创建时间" prop="creatortime">
          <el-input v-model="form.creatortime" placeholder="请输入创建时间" />
        </el-form-item>
        <el-form-item label="修改人" prop="modify">
          <el-input v-model="form.modify" placeholder="请输入修改人" />
        </el-form-item>
        <el-form-item label="修改时间" prop="modifytime">
          <el-input v-model="form.modifytime" placeholder="请输入修改时间" />
        </el-form-item> -->
      <!-- </el-form> -->

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

标签页基础上，新增页面表单校验

效果如图：

就是修改submitForm()里的东西

代码如下：

submitForm() {
  // 根据当前激活的标签页决定使用哪个表单引用进行验证
  const formRef = this.$refs[`form${this.activeTab}`]; // 确保与你的ref命名匹配

  if (formRef) {
    formRef.validate(valid => {
      if (valid) {
        this.form.isvalid = '是';
        const currentTime = new Date().toISOString();
        if (!this.form.creator) {
          this.form.creator = this.tmpName;
          this.form.creatortime = currentTime;
        } else {
          this.form.modify = this.tmpName;
          this.form.modifytime = currentTime;
        }

        const action = this.form.personnelid ? updateRetireetable : addRetireetable;
        action(this.form).then(response => {
          const msg = this.form.personnelid ? "修改成功" : "新增成功";
          this.msgSuccess(msg);
          this.open = false;
          this.getList();
        });
      } else {
        this.$message.error('表单中有数据未正确填写，请修正后再尝试提交。');
      }
    });
  } else {
    console.error('Form reference is undefined'); // 检查标签页ref是否设置错误
  }
}