element-ui表格动态增删改

实现的效果截图：

 上代码：

<template>
  <div class="viewContain">
    <div class="top">
      <div class="add">{
   
   { title }}</div>
      <div class="operate">
        <el-button
          size="mini"
          type="primary"
          @click="handleCancel"
        >放弃编辑</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleSave"
        >保存简历</el-button>
      </div>
    </div>
    <el-form
      ref="formData"
      :model="formData"
      size="small"
      :rules="rules"
      label-width="120px"
    >
      <div style="margin-bottom: 10px">
        <span style="margin-bottom: 10px;font-size: 13px;font-weight: bold;">教育经历</span>
        <el-button type="primary" size="mini" round style="padding: 3px 10px;" @click="handleAddEdu">+添加</el-button>
      </div>
      <div v-for="(item, index) in formData.educations" :key="index" class="enducateItem">
        <el-row>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item
              label="开始时间 :"
              :prop="'educations.' + index + '.startTime'"
              :rules="{required: true,message: '开始时间不能为空!', trigger: 'change'}"
            >
              <el-date-picker
                v-model="item.startTime"
                type="month"
                format="yyyyMM"
                value-format="yyyyMM"
                placeholder="请选择开始时间"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item
              label="结束时间 :"
              :prop="'educations.' + index + '.endTime'"
              :rules="{required: true,message: '结束时间不能为空!', trigger: 'change'}"
            >
              <el-date-picker
                v-model="item.endTime"
                type="month"
                format="yyyyMM"
                value-format="yyyyMM"
                placeholder="请选择结束时间"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item
              label="学校名称 :"
              :prop="'educations.' + index + '.school'"
              :rules="{required: true,message: '学校名称不能为空!', trigger: 'change'}"
            >
              <el-input
                v-model="item.school"
                placeholder="请输入学校名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item
              label="专业名称 :"
              :prop="'educations.' + index + '.major'"
              :rules="{required: true,message: '专业名称不能为空!', trigger: 'change'}"
            >
              <el-input
                v-model="item.major"
                placeholder="请输入专业名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <div class="deleteItem" @click="deleteItem(index)">删除</div>
        </el-row>
      </div>

      <div>
        <span style="margin-bottom: 10px;font-size: 13px;font-weight: bold;">工作经历</span>
        <el-button type="primary" size="mini" round style="padding: 3px 10px;" @click="handleAddJob">+添加</el-button>
      </div>
      <div v-for="(item, index) in formData.jobs" :key="item.time" class="enducateItem">
        <el-row>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item label="开始时间 :" :prop="'jobs.' + index + '.startTime'" :rules="{required: true,message: '开始时间不能为空!', trigger: 'change'}">
              <el-date-picker
                v-model="item.startTime"
                type="month"
                format="yyyyMM"
                value-format="yyyyMM"
                placeholder="请选择开始时间"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item label="结束时间 :">
              <el-date-picker
                v-model="item.endTime"
                type="month"
                format="yyyyMM"
                value-format="yyyyMM"
                placeholder="请选择结束时间"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item label="公司名称 :">
              <el-input
                v-model="item.entName"
                placeholder="请输入公司名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 12 }"
            :sm="{ span: 12 }"
            :md="{ span: 12 }"
            :xl="{ span: 12 }"
          >
            <el-form-item label="职位名称 :">
              <el-input
                v-model="item.position"
                placeholder="请输入职位名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="{ span: 24 }"
            :sm="{ span: 24 }"
            :md="{ span: 24 }"
            :xl="{ span: 24 }"
          >
            <el-form-item label="工作描述 :">
              <el-input
                v-model="item.description"
                type="textarea"
                :rows="3"
                placeholder="请输入工作描述"
                clearable
              />
            </el-form-item>
          </el-col>
          <div class="deleteItem" @click="deleteItem_job(index)">删除</div>
        </el-row>
      </div>

    </el-form>
  </div>
</template>
<script>
import {
  getPersonInfoDetail,
  addPersonInfo,
  updatePersonInfo
} from '@a/person/user.js';
import { getDictionaryList, getArea, infoAuthority } from '@a/ent/dic.js';
import { positionType } from '@a/ent/job.js';
// eslint-disable-next-line no-unused-vars
import { mapGetters } from 'vuex';
import { validPhone, validIDCard } from '@u/validate';

export default {
  data() {
    const validatePhone = (rules, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('手机号格式输入有误!'));
      } else {
        callback();
      }
    };
    const validateIdCard = (rules, value, callback) => {
      if (!validIDCard(value)) {
        callback(new Error('身份证号格式输入有误!'));
      } else {
        callback();
      }
    };
    return {
      title: '我的在线简历',
      areaAddr: [], // 现居地
      areaAddr1: [], // 期望工作地区
      birthday: '',
      value1: '',
      formData: {
        accountNatureCode: '',
        accountNatureName: '',
        birthday: '',
        collegeGraduates: '',
        education: '',
        educations: [],
        jobs: [],
        expectIndustry: '',
        expectJobArea: '',
        expectJobAreaCode: '',
        expectJobCity: '',
        expectJobCityCode: '',
        expectJobProvince: '',
        expectJobProvinceCode: '',
        expectJobSalaryName: '',
        expectJobStreet: '',
        expectJobStreetCode: '',
        expectJobType: '',
        groupType: '',
        hopeSalaryBig: '',
        hopeSalarySmall: '',
        idCard: '',
        jobNature: '',
        mail: '',
        maritalStatus: '',
        maritalStatusName: '',
        mobile: '',
        name: '',
        nowAddress: '',
        nowArea: '',
        nowAreaCode: '',
        nowCity: '',
        nowCityCode: '',
        nowProvince: '',
        nowProvinceCode: '',
        nowStreet: '',
        nowStreetCode: '',
        personalState: '',
        portrait: '',
        publicCollegeGraduatesIdentity: '',
        sex: '',
        skillLevel: '',
        selfEvaluation: '',
        workYear: '',
        workExperience: ''
      },
      rules: {
        name: [{ required: true, message: '姓名不能为空!', trigger: 'change' }],
        idCard: [
          { required: true, message: '身份证不能为空!', trigger: 'change' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        sex: [{ required: true, message: '性别不能为空!', trigger: 'change' }],
        // birthday: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        mobile: [
          { required: true, message: '手机号不能为空!', trigger: 'change' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        publicCollegeGraduatesIdentity: [
          { required: true, message: '是否公开不能为空!', trigger: 'change' }
        ],
        maritalStatus: [
          { required: true, message: '婚姻状态不能为空!', trigger: 'change' }
        ],
        groupType: [
          { required: true, message: '群体类别不能为空!', trigger: 'change' }
        ],
        education: [
          { required: true, message: '学历不能为空!', trigger: 'change' }
        ],
        personalState: [
          {
            required: true,
            message: '当前求职状态不能为空!',
            trigger: 'change'
          }
        ],
        workYear: [
          { required: true, message: '工作年限不能为空!', trigger: 'change' }
        ],
        workExperience: [
          { required: true, message: '工作经历不能为空!', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '出生年月不能为空!', trigger: 'change' }
        ],
        expectIndustry: [
          { required: true, message: '期望行业不能为空!', trigger: 'change' }
        ],
        expectJobSalaryName: [
          { required: true, message: '期望工作薪酬不能为空!', trigger: 'change' }
        ],
        // skillLevel: [
        //   { required: true, message: '技能等级不能为空!', trigger: 'change' }
        // ],
        expectJobAreaCode: [
          { required: true, message: '期望工作地区不能为空!', trigger: 'change' }
        ],
        expectJobType: [
          { required: true, message: '期望职位类型不能为空!', trigger: 'change' }
        ],
        nowAreaCode: [
          { required: true, message: '现居地不能为空!', trigger: 'change' }
        ]
      },
      sexList: [
        { label: '男', value: 1 },
        { label: '女', value: 0 }
      ],
      publicCollegeGraduatesIdentityList: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      maritalStatusList: [],
      groupTypeList: [],
      personalStateList: [],
      industryList: [],
      skillLevelList: [],
      resumeStatus: '1',
      educationList: [],
      experienceList: [],
      salaryList: []
    };
  },
  computed: {
    // ...mapGetters(['experienceList', 'educationList', 'salaryList'])
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleAddEdu() {
      const educationsLength = this.formData.educations.length
      if (educationsLength === 5) {
        this.$message({
          type: 'warning',
          message: '最多只能添加5条教育经历!'
        })
        return
      }
      this.formData.educations.push({
        startTime: '',
        description: '',
        endTime: '',
        entName: '',
        id: '',
        major: '',
        position: '',
        school: '',
        type: 1,
        userId: ''
      })
      console.log(this.formData.educations.length)
    },
    deleteItem(index) {
      // const length = this.formData.educations.length
      // console.log(length)
      // if (length > 1) {
      //   this.$confirm('确定要删除该条教育经历吗?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.formData.educations.splice(index, 1)
      //   })
      // } else {
      //   this.$message({
      //     type: 'warning',
      //     message: '至少保留一条数据!'
      //   })
      //   return
      // }

      this.$confirm('确定要删除该条教育经历吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.educations.splice(index, 1)
      })
    },
    handleAddJob() {
      const jobsLength = this.formData.jobs.length
      if (jobsLength === 5) {
        this.$message({
          type: 'warning',
          message: '最多只能添加5条工作经历!'
        })
        return
      }
      this.formData.jobs.push({
        description: '',
        endTime: '',
        entName: '',
        id: '',
        major: '',
        position: '',
        school: '',
        startTime: '',
        type: 2,
        userId: '',
        time: new Date().getTime()
      })
    },
    deleteItem_job(index) {
      const length = this.formData.jobs.length
      // console.log(length)
      if (length > 1) {
        this.$confirm('确定要删除该条工作经历吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.formData.jobs.splice(index, 1)
        })
      } else {
        this.$message({
          type: 'warning',
          message: '至少保留一条数据!'
        })
        return
      }
    },
    getList() {
      getPersonInfoDetail().then((res) => {
        console.log(res);
        if (res.data !== null) {
          console.log('有简历===');
          this.$route.meta.title = '编辑简历';
          // eslint-disable-next-line eqeqeq
          if (this.formData.expectJobSalaryName == 0) {
            this.formData.expectJobSalaryName = 8;
          }
          this.resumeStatus = '1';
          this.formData = res.data;
          if (!this.formData.educations.length) {
            // this.formData.educations = [
            //   {
            //     startTime: '',
            //     description: '',
            //     endTime: '',
            //     entName: '',
            //     id: '',
            //     major: '',
            //     position: '',
            //     school: '',
            //     type: 1,
            //     userId: ''
            //   }
            // ]
          }
          if (!this.formData.jobs.length) {
            this.formData.jobs = [
              {
                description: '',
                endTime: '',
                entName: '',
                id: '',
                major: '',
                position: '',
                school: '',
                startTime: '',
                type: 2,
                userId: ''
              }
            ]
          }
          this.formData.maritalStatus = Number(this.formData.maritalStatus);
          this.formData.expectIndustry = Number(this.formData.expectIndustry);
          this.formData.skillLevel = Number(this.formData.skillLevel);
          const {
            nowProvince,
            nowCity,
            nowArea,
            expectJobProvince,
            expectJobCity,
            expectJobArea,
            expectJobTypeName
          } = res.data;
          this.$nextTick(() => {
            if (nowProvince && nowCity && nowArea) {
              this.$refs.area.inputValue = `${nowProvince}/${nowCity}/${nowArea}`;
            }
            if (expectJobProvince && expectJobCity && expectJobArea) {
              this.$refs.area1.inputValue = `${expectJobProvince}/${expectJobCity}/${expectJobArea}`;
            }
            if (expectJobTypeName) {
              this.$refs.skillType.inputValue = `${expectJobTypeName}`;
            }
          });
        } else {
          console.log('没简历===');
          this.resumeStatus = '0';
          infoAuthority().then((res) => {
            console.log('-------->', res);
            this.$set(this.formData, 'name', res.data.name);
            this.$set(this.formData, 'mobile', res.data.mobile);
            this.$set(this.formData, 'idCard', res.data.username);
          });
        }
        console.log(this.resumeStatus);
      });
    },
    dateChangebirthday(val) {
      console.log(val);
    },
    changeNode(node) {
      console.log(node);
      this.formData.expectJobType = node[2];
    },
    handleCancel() {
      this.$confirm('确定要放弃编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: ''
      }).then(() => {
        this.$router.push({ path: '/person/resume/index' });
      });
    },
    expectJobSalaryChange(value) {
      console.log(value)
      const arr = value.split(',');
      this.formData.hopesalarySmall = arr[0];
      this.formData.hopeSalaryBig = arr[1];
    },
    handleSave() {
      const educations = this.formData.educations
      for (let i = 0; i < educations.length; i++) {
        if (Number(educations[i].endTime) < Number(educations[i].startTime)) {
          this.$message({
            type: 'warning',
            message: `第${i + 1}项教育经历,开始时间不能晚于结束时间!`
          })
          return
        }
        // if(!educations[i].startTime && !educations[i].endTime && !educations[i].school && !educations[i].major)
      }
      console.log('educations===', educations)

      const jobs = this.formData.jobs
      for (let i = 0; i < jobs.length; i++) {
        if (Number(jobs[i].endTime) < Number(jobs[i].startTime)) {
          this.$message({
            type: 'warning',
            message: `第${i + 1}项工作经历,开始时间不能晚于结束时间!`
          })
          return
        }
      }
      if (this.resumeStatus === '1') {
        console.log('有简历===', this.formData);
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            updatePersonInfo(this.formData, this.formData.id).then((res) => {
              console.log(res);
              if (res.code === 0) {
                this.$message({
                  type: 'success',
                  message: res.msg
                });
                this.$router.push({ path: '/person/resume/index' });
              }
            });
          }
        });
      } else {
        console.log('没有简历===', this.formData);
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            addPersonInfo(this.formData).then((res) => {
              console.log(res);
              if (res.code === 0) {
                this.$message({
                  type: 'success',
                  message: res.msg
                });
                this.$router.push({ path: '/person/resume/index' });
              }
            });
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.viewContain {
  .top {
    margin-bottom: 18px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .add {
      font-weight: bold;
      font-size: 20px;
    }
    .operate {
    }
  }
  .enducateItem {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 20px;
    .deleteItem {
      color: red;
      text-align: right;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
</style>