弹窗原型
**需求:在点击展开图标(+)时,要根据当前列的变量编号查询接口。但是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-tableslot="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})}},