1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <div>
    <avue-form :model="form" :rules="rules">
      <avue-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </avue-form-item>
      <avue-form-item label="学历" prop="education">
        <el-select v-model="form.education" 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-select>
      </avue-form-item>
      <avue-form-item label="工作经历">
        <table class="table">
          <thead>
          <tr>
            <th>公司</th>
            <th>职位</th>
            <th>起止时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in form.workExperience" :key="index">
            <td>
              <el-input v-model="item.company"></el-input>
            </td>
            <td>
              <el-input v-model="item.position"></el-input>
            </td>
            <td>
              <el-date-picker
                v-model="item.dateRange"
                range-separator="至"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </td>
          </tr>
          </tbody>
        </table>
      </avue-form-item>
    </avue-form>
  </div>
</template>
 
<script>
 
 
 
export default {
  name: "Business",
 
  data(){
    return {
      form: {
        name: "",
        education: "",
        workExperience: [
          { company: "", position: "", dateRange: [] },
          { company: "", position: "", dateRange: [] },
        ],
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        education: [{ required: true, message: "请选择学历", trigger: "change" }],
        "workExperience.0.company": [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        "workExperience.0.position": [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        "workExperience.0.dateRange": [
          { required: true, message: "请选择起止时间", trigger: "change" },
        ],
        "workExperience.1.company": [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        "workExperience.1.position": [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        "workExperience.1.dateRange": [
          { required: true, message: "请选择起止时间", trigger: "change" },
        ],
      },
    }
  }
}
</script>
 
<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}
 
.table th,
.table td {
  padding: 10px;
  border: 1px solid #ccc;
}
 
.table th {
  background-color: #f0f0f0;
  font-weight: bold;
}
</style>