b-table组件中的所有列都可以启用排序吗？

Posted 2023-02-23

【中文标题】b-table组件中的所有列都可以启用排序吗？

【英文标题】：Can sorting be enabled for all columns in the b-table component?

【发布时间】：2019-06-15 02:57:39

【问题描述】：

从bootstrap-vue documentation 我可以看到如何启用每列排序，但是否可以对整个表进行排序？

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 时，您可能会发现阅读网站help section 很有用。为了获得您问题的最佳答案，我们希望看到您首先尝试使用Minimal, Complete, and Verifiable 示例自己解决问题。 Here's a question checklist你可能会觉得有用

【参考方案1】：

这是不可能的，但您可以通过映射 fields 属性并添加具有真值的可排序键来轻松处理该问题，例如：

new Vue(
  el: "#app",
  data() 
    return 
      // Note 'isActive' is left out and will not appear in the rendered table
      fields: [
          key: 'last_name'

        ,
        
          key: 'first_name'

        ,
        
          key: 'age',
          label: 'Person age',

        
      ],
      items: [
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        ,
        
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        ,
        
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        ,
        
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        
      ]
    
  ,
  computed: 
    sortable_cols() 
      return this.fields.map(f => 
        let tmp = f;
        tmp.sortable = true;
        return tmp
      )

    
  

)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>

如果您没有定义 fields 属性，您可以使用以下代码：

new Vue(
  el: "#app",
  data() 
    return 

      items: [
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        ,
        
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        ,
        
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        ,
        
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        
      ]
    
  ,
  computed: 
    sortable_cols() 
      return Object.keys(this.items[0]).map(f => 
        let tmp = ;
        tmp.sortable = true;
        tmp.key = f;
        return tmp
      )
    
  

)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>

【讨论】：

您好，感谢您的回复。我考虑过这样做，但我不知道字段是什么，我只是将项目传递给表格，它为我计算出 col 标题，以及我如何只用这些项目做类似的事情？