时间戳

首页 > 解决方案 > Vue JS - 如何动态创建表

vue.js - Vue JS - 如何动态创建表

问题描述

我希望有一个按钮，单击该按钮会创建一个新表。有可能这样做吗？我在网上搜索过类似的东西，但我找不到任何东西。所有示例都处理单个表并从中添加/删除行。我遇到的问题是使用附加的方法从 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",


});

标签： vue.js

解决方案

将这些表格添加到 HTML 的最佳方法是使用创建单独的表格组件。然后使用table-component 标签中的属性
动态添加这些 table-components 。然后，您可以创建一个数组，其中包含表组件的任何必要属性。然后可以遍历这个数组并为数组中的每个项目创建一个新组件。让我用一个例子来澄清这一点：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>

推荐阅读