modal窗有没有可能在点击时再生成创建？

Question

左边第一列灰色的按钮是在生成页面的时候通过vue和bootstrap-vue组件挨个生成绑定的，代码如下：

<template>
  <div>
    <b-btn v-b-modal="modalWindowId">{{ namedPipelineName }}</b-btn>
    <b-modal :id="modalWindowId" size="lg">
      Hello From My Modal!
    </b-modal>
  </div>
</template>

<script>
  export default {
    name: 'pipeline-detail-modal',
    props: ['namedpipeline'],
    data () {
      return {
        modalWindowId: this.namedpipeline.id,
        namedPipelineName: this.namedpipeline.series.name
      }
    }
  }
</script>

我的问题有两个

１. 这些几乎相同的modal窗，单页面数据达到几百行的时候会不会是很大额外开销
２. 如果是的话，有什么好的优化方案？

Answer 1

肯定有，给你个思路
在
<b-modal :id="modalWindowId" size="lg">

  Hello From My Modal!

</b-modal
上添加一个v-if='showModal'默认false,在点击按钮时改成true，这样就会在点击按钮的时候，渲染一个模态框了

Answer 2

你可以只要一个modal窗，所有的按钮都是显示它，实时数据不一样就行了。