Typescript Vue Ant设计模式出现两次

以下是我的vue：

<template>
  <div class="orderstoapprove">

    <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" bordered rowKey="id">
      <span slot="operation" slot-scope="text, record">
        <a @click="showModal(record)">Details</a>
        <a-modal title="Bestell-Details" width="1000px" v-model="visible" @ok="handleOk">
          <HelloWorld v-bind:order=record></HelloWorld>
        </a-modal>
      </span>
    </a-table>

  </div>
</template>

栏目包括：

const columns = [
    ...
    {
      title: 'Details',
      dataIndex: 'operation',
      scopedSlots: {customRender: 'operation'},
    },
  ];

HelloWorld vue是：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop()
  private order!: any;
}
</script>

从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组成部分
导出默认类HelloWorld扩展Vue{
@支柱（
私人订单！：任何；
}

但是，当我点击任何一行中的“详细信息”时，我会看到一个“双精度”模式，并且始终只显示第一个表行中的数据：

---

有人知道错误在哪里吗？

根据我的推断，之所以会发生这种情况，是因为对话框没有唯一的v-model值。因此，只要visible设置为true，所有对话框都会同时出现。请通过在v型模型中为每个对话框指定唯一值进行检查。

我通过将

置于

属性之外解决了此问题：

<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" bordered rowKey="id">
  <span slot="operation" slot-scope="text, record">
    <a @click="showModal(record)">Details</a>

  </span>
</a-table>

<a-modal title="Bestell-Details" width="1000px"  v-model="visible" @ok="handleOk">
  <HelloWorld v-bind:order=selectedOrder></HelloWorld>
</a-modal>


showModal(key) {
        this.visible = true;
        this.selectedOrder = key;
      },

细节
showModal（键）{
可见=真实；
this.selectedOrder=键；
},

@farahm我没有太多关于如何生成表数据的信息（静态/动态）。行数据是通过v-for（数组中每个索引处的对象，类似于列数组）生成的吗？

<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" bordered rowKey="id">
  <span slot="operation" slot-scope="text, record">
    <a @click="showModal(record)">Details</a>

  </span>
</a-table>

<a-modal title="Bestell-Details" width="1000px"  v-model="visible" @ok="handleOk">
  <HelloWorld v-bind:order=selectedOrder></HelloWorld>
</a-modal>


showModal(key) {
        this.visible = true;
        this.selectedOrder = key;
      },