在项目中经常会有表格嵌套表格或者表格嵌套表单动态渲染的情况，这时候就可以使用表格的原生控件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">
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 = [] } } } }
