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 = []
}
}
}
}