vue实现点击隐藏，点击显示，折叠效果

• 加入方法
• template里加入想要展示得数据

加入方法

// 单击某条数据，显示明细
async expandChange(row) {
let temp = this.expands;
this.expands = [];
this.expands.push(row.id);
if (temp.length === 1 && temp[0] === row.id) {
// 收起展开行
this.expands = [];
} else {
this.vo.id = row.id;
await this.selectItemData();
}
},

template里加入想要展示得数据

<el-table
:data="tableData"
border
class="table"
ref="multipleTable"
header-cell-class-name="table-header"
@selection-change="handleSelectionChange"
@row-click="expandChange"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandChange"
>
<el-table-column type="expand">
<template>
<el-col :span="2">
<el-link
type="success"
icon="el-icon-circle-plus"
@click="selectAddExamItem()"
>增加</el-link>
</el-col>
<el-table
:data="selectData"
border
class="table"
ref="selectTable"
header-cell-class-name="table-header"
>
<el-table-column
prop="categoryName"
label="题目类别"
width="210px"
align="center"
></el-table-column>
<el-table-column
prop="subjectTypeName"
label="题型"
width="210px"
align="center"
></el-table-column>
<el-table-column
prop="num"
label="题目数量"
width="140px"
align="center"
></el-table-column>
<el-table-column
prop="itemDiffName"
label="难度"
width="170px"
align="center"
></el-table-column>
<el-table-column
prop="score"
label="题目分值"
width="167px"
align="center"
></el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-circle-plus"
class="green"
@click="selectAddExamItem()"
/>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="itemDelete(scope.$index, scope.row)"
/>
<el-button
type="text"
icon="el-icon-edit"
@click="selectItemEdit(scope.$index, scope.row)"
/>
</template>
</el-table-column>
</el-table>
<br />
<div align="center">
<el-button type="primary" size="mini" @click="saveItem()">保存</el-button>
</div>
</template>
</el-table-column>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="配置项" width="155" align="center">
<template slot-scope="{ row }">
<span class="link-type" @dblclick="handleEdit(1,row)">
{{
row.name
}}
</span>
</template>
</el-table-column>
<el-table-column prop="diffName" label="难度" align="center"></el-table-column>
<el-table-column prop="updatedBy" label="修改人" align="center"></el-table-column>
<el-table-column
prop="updatedTime"
:formatter="dateFormat"
label="修改时间"
align="center"
></el-table-column>
<el-table-column
label="是否启用"
align="center"
:filters="[{ text: '已启用', value: 1 }, { text: '未启用', value: 0 }]"
:filter-method="filterTag"
prop="status"
>
<template v-slot:default="scope">
<el-tag
:type="scope.row.status===1?'success':(scope.row.status===0?'danger':'')"
>{{scope.row.status===1 ? '已启用':'未启用'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="companyId" label="公司" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
<el-table-column label="操作" width="140" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-circle-plus"
class="green"
@click="handleAdd()"
/>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="configDelete(scope.$index, scope.row)"
/>
<el-button
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
/>
<el-button
type="text"
icon="el-icon-search"
class="gold"
@click="selectItem(scope.$index, scope.row)"
/>
</template>
</el-table-column>
</el-table>