element ui 表格控件每次只展開一行
在項目中經常會有表格嵌套表格或者表格嵌套表單動態渲染的情況，這時候就可以使用表格的原生控件expand屬性具體用法看官網文檔https://element.eleme.cn/#/zh-CN/component/table，但是官網給的是點開一行，再點擊下一行時上一次點開的不收起，依然打開，這樣數據渲染的時候會有問題。expand - change的使用方法為當用戶對某一行展開或者關閉的時候會觸發該事件（展開行時，回調的第二個參數為 expandedRows；樹形表格時第二參數為 expanded）同時可以調用接口 具體參考官網
代碼如下
<el-table
v-loading="loading"
ref="refTable"
:data="eqTableData"
:max-height="hight"
:row-key="getRowKeys" //獲取當前行id
:expand-row-keys="expands" //只展開一行放入當前行id
@expand-change="exChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table
ref="tableChild"
:data="dataList"
align="center"
>
<el-table-column
align="center"
label="時間"
prop="recordDate"
/>
<el-table-column
label="參數"
prop="param"
min-width="50%"/>
<el-table-column
label="異常原因"
prop="reason"
min-width="50%"/>
<el-table-column
align="center"
label="預計讀數"
prop="predictData"
min-width="50%"/>
<el-table-column
align="center"
label="實際讀數"
prop="actualData"
min-width="50%"
/>
<el-table-column
align="center"
label="操作"
>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleIgnore(scope.$index, scope.row)">忽略</el-button>
<el-button
size="mini"
type="danger"
@click="handleCorrect(scope.$index, scope.row)">修正</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
label="設備ID"
prop="eqId"/>
<el-table-column
label="所在大廈"
prop="blName"/>
<el-table-column
label="所在樓層"
prop="flName"/>
</el-table>
export default {
data() {
return {
//設置row-key只展示一行
expands: [],//只展開一行放入當前行id
getRowKeys: (row) => {/獲取當前行id
// console.log(row)
return row.eqId //這里看這一行中需要根據哪個屬性值是id
},
eqTableData: [],
dataList: []
}
}
methods：{
exChange(row, rowList) {
// console.log(row)
this.loading = true
var that = this
if (rowList.length) { // 只展開一行//說明展開了
that.expands = []
if (row) {
that.expands.push(row.eqId)// 只展開當前行id
}
// this.tablaData(row.eqId) 這里可以調用接口數據渲染
} else { // 說明收起了
that.expands = []
}
}
}
}