使用 b 按钮（向上和向下）根据索引对 table 进行排序

Question

我正在与 BootstrapVue 合作。

我有一个 table，我可以在其中使用我的 b-button 输入行。插入不同的行后，我想要一个 - 我将其命名为 sort function.

所以我希望能够根据他们的 index.所以索引应该始终相同，但 ID 应该切换。

此外，如果我的索引为零，我还禁用了按钮，因为我无法“更高”。这个我也想要最后一个元素..

谢谢你帮我！

这是为了更好地理解它的样子：

INFO 您应该可以复制粘贴代码，它应该可以工作。

模板代码

<template>
  <div>
    <b-button @click="addNewItem()">Add Input</b-button>

    <h3 class="mt-5 ml-3 mb-2"><strong>Created Table</strong></h3>
        <table class="table table-striped col-md-12 mt-4">
          <tr>
            <div class="row mt-2 mb-2">
              <th class="col-md-1 ml-4">INDEX</th>
              <th class="col-md-1">ID</th>
              <th class="col-md-1">CHANGE #</th>
            </div>
          </tr>
          <tr v-for="(item, index) in inputs" :key="item.id">
            <div class="row mt-2 mb-2">
              <td class="col-md-1 ml-4">#{{ index + 1 }}</td>
              <td class="col-md-1 mr-1">{{item.id}}</td>
              <td class="col-md-3">
                <b-button :disabled="index == 0" size="sm mr-1">Up</b-button>
                <b-button size="sm">Down</b-button>
              </td>
            </div>
          </tr>
        </table>

  </div>
</template>

脚本代码

<script>
  export default {
    data() {
      return {
        inputs: [{
          id: 1
        }],
        id: 1,
      }
    },

    methods: {
      addNewItem() {
        this.inputs.push({
          id: this.id += 1
        })
      }
    }
  }
</script>

Answer 1

我认为答案不言自明..

模板

<b-button :disabled="index == 0" @click="sortUp(index)"><b-icon icon="arrow-up"></b-icon></b-button>
<b-button :disabled="index == (inputs.length - 1)" size="sm"><b-icon icon="arrow-down" @click="sortDown(index)"></b-icon></b-button>

脚本

sortUp(index) {
  var element = this.inputs[index];
  this.inputs.splice(index, 1);
  this.inputs.splice(index-1, 0, element);
},

sortDown(index) {
  var element = this.inputs[index];
  this.inputs.splice(index, 1);
  this.inputs.splice(index+1, 0, element);
},

使用 b 按钮（向上和向下）根据索引对 table 进行排序

sort table based on index with b-buttons (up and down)

javascript

vue.js

vuejs2

bootstrap-vue