vueあるデータをクリックして、表示の詳細を実現して、クリックして隠して、クリックして表示して、折りたたみ効果
30572 ワード
vueクリック非表示、クリック表示、折りたたみ効果を実現加入方法 templateに展示したいデータ を加える
加入方法
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>