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', });
完整代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>