b-table 구성 요소의 모든 열에 대해 정렬을 활성화할 수 있습니까?

b-table 구성 요소의 모든 열에 대해 정렬을 활성화할 수 있습니까?

i에서 열별 정렬을 활성화하는 방법을 알 수 있는데 테이블 전체에 대해 정렬이 가능한가요?

불가능하지만 매핑을 통해 계산된 속성을 사용하여 쉽게 처리할 수 있습니다.fields다음과 같은 True 값을 가진 정렬 가능한 키를 추가합니다.

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>

정의하지 않으면fieldsproperty는 다음 코드를 사용할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/54294716/can-sorting-be-enabled-for-all-columns-in-the-b-table-component