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>

html

<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>

js

<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>

css

 实现效果：