Vue.js
Element-ui，el-table展开行设置文字随展开变化展开变成收起
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
问题描述:点击展开，展开行，然后展开文字变成收起。点击其它展开，该行收起文字变成展开，点击的行展开文字变成收起。
相关代码:
<el-table-column align="center" label="执行批次" type="index" width="100"></el-table-column>
<el-table-column align="center" label="执行时间" prop="startTime" width="150"></el-table-column>
<el-table-column align="center" label="结束时间" prop="endTime" width="150"></el-table-column>
<el-table-column align="center" label="执行浏览器" prop="browser"></el-table-column>
<!-- <el-table-column align="center" label="浏览器版本" prop="browerEdition"></el-table-column> -->
<el-table-column align="center" label="案例数" prop="caseNum"></el-table-column>
<el-table-column align="center" label="通过数" prop="passCaseNum"></el-table-column>
<el-table-column align="center" label="通过率" prop="passRate"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<span class="tbTextButton" @click="toogleExpand(scope.row)">展开</span>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<el-table :data="scope.row.caseReportList" border fit stripe highlight-current-row style="width:100%">
<el-table-column align="center" label="案例名称">
<template slot-scope="scope">
<span>{{scope.row.reportTestCase.testcaseName}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="场景名称">
<template slot-scope="scope">
<span>{{scope.row.reportTestCase.testcaseLineName}}</span>
</template>
</el-table-column>
《------------------代码分割线------------》
//展开更多
toogleExpand(row) {
const _this = this
let $table = _this.$refs.table;
_this.reportListInfo.map((item,index) => {
if (row.id != item.id) {
$table.toggleRowExpansion(item, false)
}
})
$table.toggleRowExpansion(row)
},
