实现思想: 运用数组创建多个数组对象变量, 然后存储在对应的数组里, 在需要提交的时候从数组中用下标取把属于同一列的数据取出来

HTML

      <div class="add-box">
        <p>岗位要求：</p>
        <p>评论：</p>
        <p>权重：</p>
      </div>
      <div v-for="(i, j) in list" :key="j" class="add-box">
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="postRequire[j]"
              placeholder="请输入岗位要求"
            />
          </p>
        </div>
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="comment[j]"
              placeholder="请输入评论"
            />
          </p>
        </div>
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="weight[j]"
              placeholder="请输入权重"
            />
          </p>
        </div>
      </div>
      <el-button @click="AddPeople">添加岗位职责</el-button>
      <el-button type="primary" @click.stop="submitForm('from')"
          >提交</el-button
        >

CSS 完成样式的修改

.add-box {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  // .jc-b{
  //   padding: 5px;
  //   border: 1px solid gray;
  // }
}

JS 代码片

export default {
  data() {
    return {
      list: [""],
      postRequire: [], //岗位要求
      comment: [], //评论
      weight: [], //权重
  },
  methods: {
    AddPeople() {//添加按钮
      this.list.push({});
      console.log(this.list, "添加的多个数组");
    },
    submitForm(formName) {//提交按钮
      if (formName) {
        let majorAList = [];
        for (let index = 0; index < this.list.length; index++) {
          majorAList.push({
            postRequire: this.postRequire[index],
            comment: this.comment[index],
            weight: this.weight[index],
          });
          console.log('每一列的值',majorAList)
        }
    }
  }

实现展示