vue+element-ui实现行数可控的表格输入

element的table中使用

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

包裹想要插入的input，或者select等HTML元素，绑定一个的数组对象，在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

JS

CSS

 实现效果：

 

转载于:https://www.cnblogs.com/xiaofengcan/p/10482865.html