首页 > > 网页制作 > css >

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

2019-03-06 07:17:41来源：博客园阅读 ()

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) {
      this.educationExperience[index].show = 'false';
      this.educationExperience.push({
        // 毕业时间
        graduationTime: '',
        // 毕业院校
        graduationSchool: '',
        // 专业
        major: '',
        // 学历
        degree: '',
        // 学历性质
        degreeNature: '',
        // 学历编号
        degreeNumber: '',
        // 是否显示新增按钮
        show: 'true',
      });
    },
    // 删除教育经历
    deleteEducation(index) {
      if (index === 0 && this.educationExperience.length === 1) {
        this.educationExperience.splice(index, 1);
        this.educationExperience.push({
          // 毕业时间
          graduationTime: '',
          // 毕业院校
          graduationSchool: '',
          // 专业
          major: '',
          // 学历
          degree: '',
          // 学历性质
          degreeNature: '',
          // 学历编号
          degreeNumber: '',
          // 是否显示新增按钮
          show: 'true',
        });
      } else {
        this.educationExperience.splice(index, 1);
      }
      if (index === this.educationExperience.length) {
        this.educationExperience[index - 1].show = 'true';
      }
    },
  },
};
</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>