vue点击某条数据，实现显示明细，点击隐藏，点击显示，折叠效果

加入方法

// 单击某条数据，显示明细
        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>