需求:表格展开行每次只展开一行

<template>
<el-table
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandSelect"
:data="neatingTableData"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item v-for="item in props.row.childreds" :key="item.id">
<div>
<i style="color:#409EFF;margin-left: 30px;" class="el-icon-tickets"></i>
<el-button style="margin-left: 10px" @click="handleClick(scope.row)" type="text">{{ item.name +".pdf"}}</el-button>
</div>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
prop="name"
label="归档目录"
width="250">
<template slot-scope="scope">
<i class="el-icon-folder-opened"></i>
<span style="margin-left: 10px">{{scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="创建日期"
width="100" align=‘center‘>
</el-table-column>
<el-table-column
prop="address"
label="备注" align=‘center‘>
</el-table-column>
</el-table>
<div class="fileNameStyle">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item v-for="item in wenjianming" :key="item.id">
<div>
<i style="color:#409EFF;" class="el-icon-tickets"></i>
<el-button style="margin-left: 10px" @click="handleClick()" type="text">{{ item.name +".pdf"}}</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template>
export default {
data() {
return {
neatingTableData:[{ id:‘12‘, name: ‘行政许可决定书‘, date: ‘2020-7-9‘, address: ‘无‘, childreds:[ { id:‘1‘, name: ‘行政许可决定书‘, }, { id:‘2‘, name: ‘行政许可书‘, } ] }, { id:‘13‘, name: ‘行政许可申请书‘, date: ‘2020-7-9‘, address: ‘无‘, childreds:[ { id:‘3‘, name: ‘行政许可决定书‘, } ] }, { id:‘14‘, name: ‘行政许可申请材料收件凭证‘, date: ‘2020-7-9‘, address: ‘无‘, childreds:[ { id:‘4‘, name: ‘行政许可决定书‘, }, { id:‘5‘, name: ‘行政许可书‘, } ] } ], } }, methods:{ // 折叠面板每次只能展开一行 expandSelect(row, expandedRows) { // console.log(‘expandedRows‘, expandedRows) // console.log(‘row‘, row) var that = this if (expandedRows.length) { that.expands = [] if (row) { that.expands.push(row.id)// 每次push进去的是每行的ID } } else { that.expands = []// 默认不展开 } // console.log(‘that.expands‘, that.expands) }, } }
user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。https://www.cnblogs.com/wangliko/p/11046090.html
vue elementui table表格展开行每次只展开一行
原文:https://www.cnblogs.com/duhui/p/13328573.html