Question

我使用Vue.js和Buefy构建前端。

我有一个红色，黑色和橙色的色域。

我想通过颜色字段对b表进行排序。

但是，我发现的排序方法是升序和降序。我可以按所需字段的颜色排序吗？

如果可能，请帮助我。

组件

private void playMusic(final Post post, final MediaPlayer mPlayer, final MyTask.Callback cb) {
    final FirebaseStorage storage = FirebaseStorage.getInstance();


    StorageReference storageRef = storage.getReference().child("/" + post.getAudio());
    storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
        @Override
        public void onSuccess(Uri uri) {

            final String url = uri.toString();

            MyTask task = new MyTask(post, cb, seekBar);
            task.execute(url);

        }
    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(@NonNull Exception e) {
            Log.i("TAG", e.getMessage());
        }
    });

}

Answer 1

好吧，您可以创建一种方法，根据其键之一（颜色）对users对象进行排序：

methods: {
  sortUsers() {
    this.users.sort(function(a, b) {
      var colorA = a.color.toUpperCase();
      var colorB = b.color.toUpperCase();
      return (colorA < colorB) ? -1 : (colorA > colorB) ? 1 : 0;
    });
  },
},

现在，您可以通过单击按钮来调用该方法。

Answer 2

您在这里https://jsfiddle.net/mazinoukah/7wdje649/3/

您需要做的就是将“可排序”属性添加到b-table-column组件中。

Vue.use(Buefy.default)

var App = new Vue({
  el: '#app',
  data: {
    switchState: true,
    checkboxState: true
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/buefy"></script>
<html>

  <head>
  
    <link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet" /> 
  
  </head>
  
  <body>
    <div id="app">
  <div class="columns">
    <div class="column is-2">
      <section>
 

        <b-table
            :data="[{ id: 44, color: 'red' }, { id: 343, color: 'black' }, { id: 56, color: 'orange' }]"
            :default-sort-direction="defaultSortDirection"
            default-sort="user.first_name"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page">

            <template slot-scope="props">
                <b-table-column field="id" label="ID" width="40" sortable numeric>
                    {{ props.row.id }}
                </b-table-column>

                <b-table-column field="color" label="color" sortable>
                    {{ props.row.color }}
                </b-table-column>

               
            </template>
        </b-table>
    </section>
    </div>
  </div>
  <hr>
</div>

  </body>

</html>

希望它会有所帮助：）

Vue.js /如何使用Buefy按数据排序

2 个答案: