标签：el name age class scope table id expand row

<template>   <el-table ref="classTable" :data="classList" style="width: 100%" @expand-change="handleExpandChange">     <el-table-column type="expand">       <template slot-scope="props">         <el-table :data="studentMap[props.row.id]" style="width: 100%">           <el-table-column label="学号" align="center">             <template slot-scope="scope">{{ scope.row.id }}</template>           </el-table-column>           <el-table-column label="学生姓名" align="center">             <template slot-scope="scope">{{ scope.row.name }}</template>           </el-table-column>           <el-table-column label="年龄" align="center">             <template slot-scope="scope">{{ scope.row.age }}</template>           </el-table-column>         </el-table>       </template>     </el-table-column>     <el-table-column label="班级编号" align="center">       <template slot-scope="scope">{{ scope.row.id }}</template>     </el-table-column>     <el-table-column label="班级简称" align="center">       <template slot-scope="scope">{{ scope.row.name }}</template>     </el-table-column>     <el-table-column label="班级全称">       <template slot-scope="scope">{{ scope.row.fullName }}</template>     </el-table-column>     <el-table-column label="班主任" align="center">       <template slot-scope="scope">{{ scope.row.teacher }}</template>     </el-table-column>   </el-table> </template>
<script> export default {   name: 'Table',   data() {     return {       currentClassId: '',       classList: [],       studentMap: {},       getRowKey(row) {         console.log(row.id)         return row.id       },       test: true     }   },   created() {     this.fetchClassList()     this.fetchStudentClassMap()   },   methods: {     fetchClassList() {       this.classList = [{         id: 'class-1',         name: '软工1班',         teacher: '于老师',         fullName: '软件工程学院-软件工程-1班'       }, {         id: 'class-2',         name: '计科1班',         teacher: '张老师',         fullName: '软件工程学院-计算机科学技术-1班'       }, {         id: 'class-3',         name: '软工2班',         teacher: '李老师',         fullName: '软件工程学院-软件工程-2班'       }, {         id: 'class-4',         name: '工商1班',         teacher: '钱老师',         fullName: '商学院-工商管理-1班'       }]     },     fetchStudentClassMap() {       this.studentMap = {         'class-1': [           {             id: '20200101',             name: '小范',             age: 18           }, {             id: '20200102',             name: '小王',             age: 19           }, {             id: '20200103',             name: '小李',             age: 19           }         ],         'class-2': [           {             id: '20200201',             name: '小左',             age: 18           }, {             id: '20200202',             name: '小夏',             age: 19           }         ],         'class-3': [           {             id: '20200301',             name: '小丁',             age: 18           }, {             id: '20200302',             name: '小杨',             age: 19           }         ],         'class-4': [           {             id: '20200401',             name: '小许',             age: 18           }         ]       }     },     handleExpandChange(row, expandRows) {       const $classTable = this.$refs.classTable       console.log(row, expandRows);       if (expandRows.length > 1) {         expandRows.forEach(expandRow => {           if (row.id !== expandRow.id) {             $classTable.toggleRowExpansion(expandRow, false)          setTimeout(() => {         this.test = true         console.log('click', row);       });
          }         })       }       this.currentClassId = row.id       if(this.test) setTimeout(() => {         // this.test = true         console.log('click', row);       });       this.test = false     }   } } </script>
<style>     .demo-table-expand {         font-size: 0;     }
    .demo-table-expand label {         width: 90px;         color: #99a9bf;     }
    .demo-table-expand .el-form-item {         margin-right: 0;         margin-bottom: 0;         width: 50%;     } </style>

标签：el,name,age,class,scope,table,id,expand,row
来源： https://www.cnblogs.com/YuyuFishSmile/p/15971030.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。