<template>
<el-table ref="table" :data="teamData" style="width: 100%;margin-bottom: 15px;" :row-key="getRowKeys"
:expand-row-keys="expands" @expand-change="expndChange">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="teamList" style="width:80%; margin:0 auto" border>
<el-table-column prop="userName" label="用户名" width="180">
</el-table-column>
<el-table-column prop="realName" label="姓名" width="180">
</el-table-column>
<el-table-column prop="email" label="邮箱">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="fileName" label="战队头像">
<template slot-scope='scope'>
<img v-if='scope.row.teamPicture' :src="`/service/mooc-file-server/file/browse/${scope.row.teamPicture}`"
width="40" height="40" alt="">
<img v-else src="@/assets/team.png" width="40" height="40" alt="">
</template>
</el-table-column>
<el-table-column prop="name" label="战队名称">
<template slot-scope='scope'>
<a style="cursor: pointer;" @click='detail(scope.row.id)'> {{scope.row.name}}</a>
</template>
</el-table-column>
<el-table-column prop="slogan" label="战队口号">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="toogleExpand(scope.row)" type="text" size="small">队员列表</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
//实现只有一个展开折叠
expndChange(row, expandedRows) {
// console.log(ex)
this.teamList = []
if (expandedRows.length) {
this.expands = []
if (row) {
this.expands.push(row.id)// 每次push进去的是每行的ID
api.teamDataList({
orgId: row.id
}).then(data => {
if (data) {
this.teamList = data.resultData
}
})
}
} else {
this.expands = []// 默认不展开
}
},
//点击队员列表使其展开
toogleExpand(row) {
let $table = this.$refs.table;
$table.toggleRowExpansion(row)
},
getRowKeys(row) {
return row.id
},
//导入队员时关闭折叠框
closeExpand(){
this.expands = []
},
</script>
原文地址:https://blog.csdn.net/weixin_46156770/article/details/114392333
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。