1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ant design vue 嵌套table 的使用以及 expand事件

ant design vue 嵌套table 的使用以及 expand事件

时间:2021-04-18 02:22:18

相关推荐

ant design vue 嵌套table 的使用以及 expand事件

弹窗原型

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。