vue+element-ui實現行數可控的表格輸入

element的table中使用

<template slot-scope="scope">
</template>

包裹想要插入的input，或者select等HTML元素，<el-table>綁定一個的數組對象，在input或者select等HTML元素使用 v-model="scope.row.graduationSchool"，graduationSchool為該HTML在table綁定數組對象的對應屬性；這樣就可以實現每一行的數據分別存儲在table綁定數組對象的不同下標數組中。

新增一列時，只需要讓table綁定數組對象push()一個與先前屬性一致的空對象進去。

this.educationExperience.push({
        // 畢業時間
        graduationTime: '',
        // 畢業院校
        graduationSchool: '',
        // 專業
        major: '',
        // 學歷
        degree: '',
        // 學歷性質
        degreeNature: '',
        // 學歷編號
        degreeNumber: '',
        // 是否顯示新增按鈕
        show: 'true',
      });

 完整代碼：

<template>
<div class="test">
  <el-card class="educationExperienceTable">
    <span class="cardHeader">教育經歷</span>

    <el-table :data="educationExperience"
              stripe
              border>
      <el-table-column label="畢業時間">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-date-picker v-model="scope.row.graduationTime"
                            placeholder=""
                            type="date"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="畢業院校">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.graduationSchool"
                      placeholder="">
            </el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="專業">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.major"
                      placeholder="">
            </el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="學歷">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-select v-model="scope.row.degree"
                        placeholder=""
                        clearable>
              <el-option v-for="(item, index) in degreeList"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="學歷性質">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-select v-model="scope.row.degreeNature"
                        placeholder=""
                        clearable>
              <el-option v-for="(item, index) in degreeNatureList"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="學歷編號">
        <template slot-scope="scope">
          <div class="educationExperienceDiv">
            <el-input v-model="scope.row.degreeNumber"
                      placeholder="">
            </el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                        width="136px">
        <template slot-scope="scope">
            <el-button type="success"
                        size="mini"
                        icon="el-icon-circle-plus-outline"
                        v-if="scope.row.show === 'true'"
                        plain
                        @click="pushNewEducation(scope.$index)">
            </el-button>
            <el-button type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        plain
                        @click="deleteEducation(scope.$index)">
            </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</div>
</template>

<script>
export default {
  data() {
    return {
      // 教育經歷
      educationExperience: [{
        // 畢業時間
        graduationTime: '',
        // 畢業院校
        graduationSchool: '',
        // 專業
        major: '',
        // 學歷
        degree: '',
        // 學歷性質
        degreeNature: '',
        // 學歷編號
        degreeNumber: '',
        // 是否顯示新增按鈕
        show: 'true',
      }],
      // 可選學歷列表
      degreeList: [
        { label: '高中', value: '高中' },
        { label: '初中', value: '初中' },
        { label: '小學', value: '小學' },
      ],
      // 可選學歷性質
      degreeNatureList: [
        { label: '小學升高中', value: '小學升高中' },
        { label: '初中升高中', value: '初中升高中' },
        { label: '高中升大學', value: '高中升大學' },
      ],
    };
  },

  methods: {
    // 添加新的教育經歷
    pushNewEducation(index) {
      const list = this.educationExperience;
      list[index].show = 'false';
      list.push({
        // 畢業時間
        graduationTime: '',
        // 畢業院校
        graduationSchool: '',
        // 專業
        major: '',
        // 學歷
        degree: '',
        // 學歷性質
        degreeNature: '',
        // 學歷編號
        degreeNumber: '',
        // 是否顯示新增按鈕
        show: 'true',
      });
    this.educationExperience = list;
    },
    // 刪除教育經歷
    deleteEducation(index) {
      const list = this.educationExperience;
      if (index === 0 && list.length === 1) {
        list.splice(index, 1);
        list.push({
          // 畢業時間
          graduationTime: '',
          // 畢業院校
          graduationSchool: '',
          // 專業
          major: '',
          // 學歷
          degree: '',
          // 學歷性質
          degreeNature: '',
          // 學歷編號
          degreeNumber: '',
          // 是否顯示新增按鈕
          show: 'true',
        });
      } else {
        list.splice(index, 1);
      }
      if (index === list.length) {
        list[index - 1].show = 'true';
      }
      list = this.educationExperience;
    },
  },
};
</script>

<style lang="scss">
.test {
  .educationExperienceTable {
    .educationExperienceDiv {
      width: 100%;
      overflow: hidden;
      border: 1px solid rgb(231, 227, 227);
      border-radius: 10px;
      .el-input__inner {
        border: none;
      }
    }
  }
  .cardHeader {
    font-weight: bold;
    color: #606266;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(211, 211, 211);
  }
}
</style>

 實現效果：