element ui 表格控件每次只展开一行 在项目中经常会有表格嵌套表格或者表格嵌套表单动态渲染的情况，这时候就可以使用表格的原生控件expand属性具体用法看官网文档https://element.eleme
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 = [] } } } }