弹窗原型
**需求:在点击展开图标(+)时,要根据当前列的 变量编号 查询接口。但是expand事件只会获取当前展开行的数据,所以会造成在展开多行,调用查询接口时,传入了相同的 变量编号 ,从而得到相同的数据列表,参见下图
-
expand(expanded, record)事件提供了两个参数:
expanded: 当前行展开 还是 关闭
record: 当前行数据 -
展开功能配置提供了 expandRowKeys 属性,可以通过该属性,解决以上问题。每次只需要展开一行,其他行关闭
代码
html
<!-- 选择变量弹窗 -->
<a-modal
:width="700"
title="选择变量"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk('variable')"
@cancel="handleCancel('variable')"
>
<a-table
@expand="expand"
:columns="vcolumns"
:data-source="variableData"
:pagination="ipagination"
@change="handleTableChange"
:expanded-row-keys.sync="expandedRowKeys"
>
<a-table
slot="expandedRowRender"
:columns="vinnerColumns"
:data-source="variableInnerData"
:rowSelection="{onSelect: selectVariable, onSelectAll: selectVariableAll, onChange: onSelectVariable}"
:pagination="false"
/>
</a-table>
</a-modal>
***js***
expand(expanded, record){
if(expanded){
let key = this.expandedRowKeys.pop()
this.expandedRowKeys1 = []
this.expandedRowKeys1.push(key)
// 根据选中的数据查询接口
const data = {
variablesGroupId: record.id
}
variableList(data).then(res => {
this.variableInnerData = res.result.records
})
}
},