时间戳

首页 > 解决方案 > 将值从一个表移动到另一个表

jquery - 将值从一个表移动到另一个表

问题描述

我正在使用 spring、axios 和 vue Js 将我的数据从 mysql 显示到一个表中。当我单击表格行中的数据时，我能够提醒数据。我想要的是当我单击它应该出现的数据或移动到同一页面内的另一个不同的表或列表时。我该怎么做。这是我的代码：

<table id="myTable" class="display table" width="100%">
  <thead>
    <tr>
      <th>Account Type</th>
      <th>Amount</th>
      <th>Date</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="account in accounts">
      <td>{{account.account_type}}</td>
      <td>{{account.amount}}</td>
      <td>{{account.date}}</td>
      <td>{{account.description}}</td>
      <td><Button v-on:click.prevent="getRowData(account)">Add To List</Button></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var appVM = new Vue({
        el: '#app',
        data: {
          id: '',
          account_type: '',
          amount: '',
          date: '',
          description: '',
          accounts: Array(),
          rowData: {}

        },
        created: function() {
          this.getAccounts();
        },
        getRowData: function(account) {
          axios.get("/account/" + account.id, ).then(function(response) {
            this.rowData = response.data;
            alert(JSON.stringify(this.rowData))
          }.bind(this))
        }
</script>

标签： jqueryhtmlspringaxios

解决方案

要在表格之外再次显示数据，您可以只显示rowData（我不知道结构）：

<div v-if="rowData">
  <div> {{rowData.accountId}} </div>
  <div> {{rowData.whatever}} </div>
</div>

如果要显示单击行的列表：1）声明

data: {
...
clickedAccounts: Array()
}

2）当你提醒它时推送新元素：clickedAccounts.push(this.rowData)

3）在表格或类似的东西中显示它

<div v-for="clickedAccount in clickedAccounts">
  <div> {{clickedAccount.accountId}} </div>
  <div> {{clickedAccount.whatever}} </div>
</div>

4）也许是最重要的：思考、搜索和尝试 :)

推荐阅读