

源碼:第一步
<el-table :data="tableData" border :row-class-name="tableRowClassName" @expand-change="expandChange" :expand-row-keys="expands" :row-key='getRowKeys'> <el-table-column type="expand" label="詳情"> <template slot-scope="props"> <el-form label-position="left" class="demo-table-expand" label-width="120px"> <el-form-item label="印章圖標" v-if="props.row.isEdit"> <viewer :images="user_img"> <img :src="user_img[0].url" style="width: 60px;height: 60;border:1px solid #eee;border-radius: 5px;"/> </viewer> </el-form-item>
第二步

源碼:
//設置row-key只展示一行
expands: [],//只展開一行放入當前行id
getRowKeys(row){
return row.id
},
第三步
代碼:
//表格當前行被展開或收起
expandChange(row,expandedRows) {
let that=this
console.log(expandedRows);
//只展開一行
if (expandedRows.length) {//說明展開了
that.expands = []
if (row) {
that.expands.push(row.id)//只展開當前行id
}
} else {//說明收起了
that.expands = []
}
