Мод Vue Ant Design появляется дважды - PullRequest
Новая
       25

Мод Vue Ant Design появляется дважды

0 голосов
/ 11 декабря 2019

Следующее - мое мнение: 

<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>

Что выглядит следующим образом:

enter image description here

Таким образом, последний столбец - это "Подробностистолбец, который должен открывать всплывающее диалоговое окно (модальное)

showModal: 

  showModal(key) {
    console.log("showModal " + key);
    this.visible = true;
  },

столбцы: 

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

HelloWorld vue is: 

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

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

Но когда я нажимаю «Детали» в любой строке, я вижу «двойной» модал, и всегда отображаются только данные из первой строки таблицы:

enter image description here

Кто-нибудь знает, где лежит ошибка?

1 Ответ

0 голосов
/ 12 декабря 2019

Я решил, поставив <a-model> вне атрибута <span>: 

<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;
      },
...