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-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
        })
      }
    },