Question

我正在寻找一个按钮，单击该按钮时将创建一个新表。有可能这样做吗？我已经在网上搜索了类似的内容，但找不到任何内容。所有示例都处理单个表并从中添加/删除行。我遇到的问题是使用附加的方法渲染Vue的html表标签。那就是我遇到的障碍。另外，我不太确定如何基于表添加行。我要完成的目标是否可能？

更新

我能够插入多个组件，但前提是我必须在html中对其进行硬编码。

html

<div class="temp">

    <temp></temp>
    <temp></temp>
    <temp></temp>


    </div>

关于Vue，我创建了一个模板组件，并且一切正常。我的目的是在单击按钮时将<temp></temp>插入html页面，以便可以创建另一个表。

Vue

Vue.component('temp', {
    template: '\
<div>\
    <table v-for="(name,i) in rows.slice(0,1)" :key="i">\ 
        <tr>
            <input class="form-control" type="text" v-model="name.exercise" placeholder="Exercise Name"/>
        </tr>
        <tr>
            <th></th>
            <th>Set</th>
            <th>Reps</th>
            <th>Rest</th>
            <th>Comments</th>
         </tr>
         <tr v-for= "(row,k) in rows" :key="k">
             <td scope="row">
                 <i class="fa fa-trash" v-on:click="delRow(k,row)"></i>
             </td >
             <td>
                 <input class="form-control" type="number"v-model="row.set_num" readonly="readonly"/>
             </td>
             <td>\
                 <input class="form-control" type="text" v-model="row.num_of_reps" placeholder="10"/>\
             </td>\
             <td>\
                 <input class="form-control" type="text" v-model="row.rest_time"placeholder="1:30"/>\
             </td>\
             <td>\
                 <input class="form-control" type="text" v-model="row.comments"/>\
             </td>\
        </tr>\
    </table>\
    <button type="button" class="btn btn-info" v-on:click="addRow">\
        <i class="fa fa-plus"></i>\
            Add Row\
        </button>\
</div>',
    data() {
        return {
            set_number: 2,
            rows: [{
                exercise:"exercise",
                set_num: 1,
                num_of_reps: "",
                rest_time: "",
                comments: ""
            }]
        }
    },
    methods: {
        addRow: function () {
            this.rows.push({
                exercise:"exercise",
                set_num: this.set_number++,
                num_of_reps: "",
                rest_time: "",
                comments: ""
            });
        },
        delRow: function (k, row) {
            let row_index = this.rows.indexOf(row);
            if (row_index > 0) {
                this.rows.splice(row_index, 1);
            }
            this.set_number = 1;
            for (let i in this.rows) {
                this.rows[i].set_num = this.set_number;
                this.set_number++;
            };
        }

    }
});

let temp = new Vue({
    el: ".temp",


});

Answer 1

将这些表添加到HTML的最好方法是使用创建单独的表组件的方法。
然后使用表组件标签中的v-for属性动态添加这些表组件。

然后，您可以创建一个包含表必需属性的数组，零件。 v-for然后可以遍历此数组，并为数组中的每个项目创建一个新组件。让我用一个例子来阐明这一点：

const ListItem = {
  props: [
    'text'
  ],
  template: "<div> {{ text }} </div>",
}

const vm = new Vue({
  el: '#vue-instance',

  components: {
    listitem: ListItem
  },
  data: {
    elements: []
  },
  methods: {
    addElement: function() {
      this.elements.push("This is a new instance")
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vue-instance">
  <button @click="addElement">
     Add an element
   </button>

  <listitem v-for="(element, index) in elements" :text="element" :key="index">
  </listitem>
</div>

Vue JS-如何动态创建表

1 个答案: