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

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

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/xiaofengcan/p/10482865.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:px妙转rem

下一篇:小tips:使用rem+vw实现简单的移动端适配