使用 vue.js 动态向表中添加行

Posted 2023-02-22

技术标签:

【中文标题】使用 vue.js 动态向表中添加行【英文标题】：Add rows to the table dynamically with the use of vue.js 【发布时间】：2019-02-12 03:59:46 【问题描述】：

我学习了 vue.js，并用 html 和 CSS 创建了一个基本表单：

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>                       
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<div id="app">
<div class="col-xs-5" id="mail_div">
    <label for="mail">Mail:</label>
    <input v-model="mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
    <label for="date">Date:</label>
    <div class='input-group date' id='datetimepicker1'>
    <input v-model="date" placeholder="Pick a date:" type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
</div>
<div class="col-xs-5" id="adress_div">
    <label for="adress">Adress:</label>
    <input v-model="adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div> 
<div class="col-xs-5" id="company_div">
    <label for="company">Company:</label>
    <input v-model="company" placeholder="Company name:"type='text' class="form-control" id="company">
</div> 
<div class="col-xs-5" id="fliers_div">
    <label for="fliers">Number:</label>
    <input v-model="fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">   
</div>    
<div id="table">
<table class="table">
    <thead>
        <th scope="col">Mail</th>
        <th scope="col">Date</th>
        <th scope="col">Adress</th>
        <th scope="col">Company</th>
        <th scope="col">Number</th>
    </thead>
    <tbody>
        <tr>
          <th scope="row"> mail </th>
          <td> date </td>
          <td> adress </td>
          <td> company </td>
          <td> fliers </td>
        </tr>
    </tbody>
</table>
</div>
<div id="button">
    <div id="button_container_1">
        <button type="button" class="btn btn-primary">Add a row</button>
    </div>
    <div id="button_container_2">
        <button type="button" class="btn btn-success">Download</button>
    </div>
</div>
</div>


<script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"></script>
<script type="text/javascript">

    $(function () 
        $('#datetimepicker1').datetimepicker(locale:'pl');
    );

</script>
</body>

这是我的 .js 文件，到目前为止它还没有做很多事情：

var app = new Vue(
 el: '#app',
 data: 
  mail:'',
  date:'',
  adress:'',
  company:'',
  fliers:''

)

当我提交数据时，此代码会动态更新表格的行。我想要达到的效果应该让我在按下蓝色按钮后输入更多行的数据。如何使用 vue.js 做到这一点？我在 vue.js 中找到了一些关于动态表的教程，但是我还没有为我的案例找到易于掌握的解决方案。

【问题讨论】：

【参考方案1】：

您应该进行以下更改：

在data 属性中声明一个数组（我们称之为rowData）

在methods: 中声明一个方法（我们称之为addItem）

在方法内部，从属性中填充一个 javascript 对象（邮件、日期、地址）

var app = new Vue(
  el: '#app',
  data: 
    mail:'',
    date:'',
    adress:'',
    company:'',
    fliers:'',
    rowData:[] //the declared array
  ,
  methods:
    addItem()
      var my_object = 
        mail:this.mail,
        date:this.date,
        adress:this.adress,
        company: this.company,
        fliers: this.fliers
      ;
      this.rowData.push(my_object)

      this.mail = '';
      this.date = '';
      this.adress = '';
      this.company = '';
      this.fliers = '';
    
  
)

然后像这样更新您的 html：

<tr v-for="item in rowData" >
  <th scope="row"> item.mail </th>
  <td> item.date </td>
  <td> item.adress </td>
  <td> item.company </td>
  <td> item.fliers </td>
</tr>

每次将新对象推送到rowData 数组时，VueJs 都会自动检测并渲染表格中的新行。

【讨论】：

你知道为什么它不能在烧瓶中工作吗？当我将其作为本地主机打开时，我得到 "jinja2.exceptions.UndefinedError: 'item' is undefined" 。不幸的是，如果您提到它，我不使用 flask/python。也许在 javascript 中使用这个变量也已经在烧瓶中使用了。尝试将变量 item 更改为其他值。前任。 myrow 和所有输出表达式，如 item.mail 到 myrow.mail 。但这仍然是一个假设。 Flask 和 V-For 之间可能存在某种冲突。我再问一个问题。亲爱的 P-box 请检查此线程以获取解决方案***.com/questions/41082626/…【参考方案2】：

要使用的基本内容将是 Vue 对象创建中的方法部分、v-for 用法和添加到按钮的 @click 操作。

<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>                       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
    <div id="app">
        <div class="col-xs-5" id="mail_div">
            <label for="mail">Mail:</label>
            <input v-model="current.mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
        </div>
    <div class="col-xs-5" id="date_div">
    <label for="date">Date:</label>
    <div class='input-group date' id='datetimepicker1'>
        <input v-model="current.date" placeholder="Pick a date:" type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>
<div class="col-xs-5" id="adress_div">
    <label for="adress">Adress:</label>
    <input v-model="current.adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div> 
<div class="col-xs-5" id="company_div">
    <label for="company">Company:</label>
    <input v-model="current.company" placeholder="Company name:"type='text' class="form-control" id="company">
</div> 
<div class="col-xs-5" id="fliers_div">
    <label for="fliers">Number:</label>
    <input v-model="current.fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">   
</div>    
<div id="table">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Mail</th>
                <th scope="col">Date</th>
                <th scope="col">Adress</th>
                <th scope="col">Company</th>
                <th scope="col">Number</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="el in arr">
                <td> el.mail </td>
                <td> el.date </td>
                <td> el.adress </td>
                <td> el.company </td>
                <td> el.fliers </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="button">
    <div id="button_container_1">
        <button type="button" class="btn btn-primary" @click="addCurrent">Add a row</button>
    </div>
    <div id="button_container_2">
        <button type="button" class="btn btn-success">Download</button>
    </div>
</div>
</div>


<script type="text/javascript">var app = new Vue(
  el: '#app',
  data: 
    current:mail: '',
    date: '',
    adress:'',
    company:'',
    fliers:'',
    arr:[]
  ,
  methods: 
    addCurrent() 
        this.arr.push(JSON.parse(JSON.stringify(this.current)));
    
  
)</script>
<script type="text/javascript">

    $(function () 
        $('#datetimepicker1').datetimepicker(locale:'pl');
    );

</script>
</body>

【讨论】：

这个解决方案缺少一些东西。当我更改表单中的值时，它也会更新前面的行。谢谢，但我对这个解决方案有问题，它没有更新 id【参考方案3】：

您可能想查看这些真实示例。他们创造了与你相似的东西。

HTML

<div id="form-message">
<button class="btn btn-default" @click="addNewMessage">New Message</button>
 <template v-for="message in messages">
 <input type="text" v-model="message.DestinationNumber" class="form-control">
 <textarea rows="3" v-model="message.TextDecoded" class="form-control"> 
</textarea>
</template>
<button class="btn btn-success" @click.prevent="submitForm">Submit</button>
<pre>messages | json</pre>

</div>

 var newSingleMessage = new Vue(
 el: '#form-message',
 data: 
  messages: [
    
        DestinationNumber: '',
        TextDecoded: ''
    
 ],
submitted:false
,
 methods: 
addNewMessage: function()
    this.messages.push(
        DestinationNumber: '',
        TextDecoded: ''
    );
,
submitForm: function(e) 
    console.log(this.messages);
    this.$http.post('api/outbox', messages:this.messages)
    .then(function(response)
            //handle success
            console.log(response);
    ).error(function(response)
            //handle error
            console.log(response)
    );
    this.messages = [ DestinationNumber: '', TextDecoded: '' ];
    this.submitted = true;


);

Source JSFiddle

【讨论】：

以上是关于使用 vue.js 动态向表中添加行的主要内容，如果未能解决你的问题，请参考以下文章

Python PyQt5 - 向表中添加行

如何在 React Hooks 中向表中添加行而不重复？

如何在SQL中向表中添加“X”行？

使用 JavaScript 向表中添加新行时重置输入字段

如何在 PHP 中向表行添加多个类？ [关闭]

Jquery - 向表中添加新行（IE 友好版本）