Сортировка таблицы Vue. js - PullRequest
Новая
       23

Сортировка таблицы Vue. js

1 голос
/ 23 апреля 2020

Я пытаюсь отсортировать таблицу по столбцам. Чтобы при нажатии кнопки идентификатора все столбцы были упорядочены от наивысшего к низшему или наоборот, и то же самое путем нажатия двух других. Как я могу это сделать? 

<table id="mi-tabla">
            <thead>
            <tr class="encabezado-derecha" >
              <th>ID</th>
              <th>Nombre de sección</th>
              <th>Potencial (€)</th>
            </tr>
            </thead>
            <tbody>
            <tr class="item" v-for="user in userInfo" @click="openDiv(), showInfo1(user.id_section)">
              <td>{{user.id_section}}</td>
              <td>{{user.desc_section}}</td>
              <div class="acceder">
              <td>{{user.sale_potential | currency}}</td>
              <img src="../../iconos/icon/chevron/right@3x.svg" alt />
              </div>
            </tr>
            </tbody>
          </table>

{
      "id_store": 4,
      "id_section": 1,
      "desc_section": "MATERIALES DE CONSTRUCCION yeh",
      "id_rule": 1,
      "sale_potential": "69413.5525190617"
    },
    {
      "id_store": 4,
      "id_section": 2,
      "desc_section": "CARPINTERIA Y MADERA",
      "id_rule": 1,
      "sale_potential": "74704.3439572555"
    },
    {
      "id_store": 4,
      "id_section": 3,
      "desc_section": "ELECTR-FONTAN-CALOR",
      "id_rule": 1,
      "sale_potential": "101255.89182774"
    }
    ]

Ответы [ 3 ]

2 голосов
/ 23 апреля 2020

Вот как это может выглядеть, если вы хотите реализовать себя, обратите внимание, что это очень базовая c функциональность, и когда вы начнете добавлять дополнительные функции, вы можете получить больше преимуществ от использования компонента, который уже все это делает.

Во всяком случае, способ, которым вы можете это сделать, - это использовать вычисленную (sortedList) для хранения отсортированной версии массива. Затем используйте другую переменную данных, чтобы сохранить столбец, который вы хотите сохранить (sortBy), и при желании вы можете сохранить направление сортировки (sortOrder)

, а затем добавить метод sort, который передает сортирует ключ и обновляет значение sortBy и / или sortOrder. Когда любое из этих значений (или даже исходный массив) изменяется, вычисляемый будет повторно сортировать массив, используя функцию сортировки. 

new Vue({
  el: "#app",
  data: {
  	sortBy: "id_section",
    sortOrder: 1,
    userInfo: [
      {
        "id_store": 4,
        "id_section": 1,
        "desc_section": "MATERIALES DE CONSTRUCCION yeh",
        "id_rule": 1,
        "sale_potential": "69413.5525190617"
      },
      {
        "id_store": 4,
        "id_section": 2,
        "desc_section": "CARPINTERIA Y MADERA",
        "id_rule": 1,
        "sale_potential": "74704.3439572555"
      },
      {
        "id_store": 4,
        "id_section": 3,
        "desc_section": "ELECTR-FONTAN-CALOR",
        "id_rule": 1,
        "sale_potential": "101255.89182774"
      }
    ]
  },
  computed: {
    sortedList() {
      return [...this.userInfo]
        .map(i => ({...i, sale_potential:parseFloat(i.sale_potential)}))
        .sort((a,b) => {
      	  if (a[this.sortBy] >= b[this.sortBy]) {
        	return this.sortOrder
          }
        return -this.sortOrder
      })
    }
  },
  methods: {
  	sort: function(sortBy){
    	if(this.sortBy === sortBy) {
      	this.sortOrder = -this.sortOrder;
      } else {
      	this.sortBy = sortBy
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  [{{sortBy}}] [{{sortOrder}}]
  <table id="mi-tabla">
    <thead>
      <tr class="encabezado-derecha">
        <th @click='sort("id_section")'>{{ sortBy === 'id_section' ? '*' : '' }}ID</th>
        <th @click='sort("desc_section")'>{{ sortBy === 'desc_section' ? '*' : '' }}Nombre de sección</th>
        <th @click='sort("sale_potential")'>{{ sortBy === 'sale_potential' ? '*' : '' }}Potencial (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="item" v-for="user in sortedList">
        <td>{{user.id_section}}</td>
        <td>{{user.desc_section}}</td>
        <div class="acceder">
          <td>{{user.sale_potential | currency}}</td>
          <img src="../../iconos/icon/chevron/right@3x.svg" alt />
        </div>
      </tr>
    </tbody>
  </table>
</div>
2 голосов
/ 23 апреля 2020

Я бы порекомендовал вам использовать bootstrap Vue таблицы, которые идут с фильтрацией и сортировкой. Все, что вам нужно сделать, это передать свои данные в таблицу.

Вот ссылка, по которой вы можете ее проверить.

https://bootstrap-vue.js.org/docs/components/table#complete - пример 

< script >
  export default {
    data() {
      return {
        items: [{
            "id_store": 4,
            "id_section": 1,
            "desc_section": "MATERIALES DE CONSTRUCCION yeh",
            "id_rule": 1,
            "sale_potential": "69413.5525190617"
          },
          {
            "id_store": 4,
            "id_section": 2,
            "desc_section": "CARPINTERIA Y MADERA",
            "id_rule": 1,
            "sale_potential": "74704.3439572555"
          },
          {
            "id_store": 4,
            "id_section": 3,
            "desc_section": "ELECTR-FONTAN-CALOR",
            "id_rule": 1,
            "sale_potential": "101255.89182774"
          }
        ],
        fields: [{
          key: 'id_store',
          label: 'id',
          sortable: true
        }, {
          key: 'desc_section',
          label: 'Nombre de sección'
        }, {
          key: 'sale_potential'
        },{key:'actions'}]
      }
    },
  } <
  /script>
   <b-table striped hover :items="items" :fields="fields">
    <template v-slot:cell(sale_potential)="row">
           <p>{{row.item.sale_potential |currency}}</p>
         <img src="../../iconos/icon/chevron/right@3x.svg" alt />
     </template> 
   <template v-slot:cell(actions)="row">
     <button @click="openDiv(); showInfo1(row.item.id_section);" 
         class="btn" variant="primary">Action</button>
    </template> 
  </b-table>
1 голос
/ 23 апреля 2020

Если вы хотите добавить эту функцию самостоятельно, вы можете достичь ее, используя вычисленное значение для сортировки ваших данных. 

data () => ({
  ...
  sortBy : null,
}),
computed : {
  userInfoSorted () {
    const sortBy = this.sortBy
    if (!sortBy) return this.userInfo
    return this.userInfo.sort((a,b)=> a[sortBy] > b[sortBy] ? 1 : -1)
  }
}

Затем обновите значение sortBy в тегах <th> вашего шаблона: 

<th @click="sortBy='id_section'">ID</th>

и свяжите ваши строки с вычисленным значением: 

<tr class="item" v-for="user in userInfoSorted">

РЕДАКТИРОВАТЬ: ИЗМЕНИТЬ ПОРЯДОК СОРТИРОВКИ

Чтобы добавить параметр для переключения порядок, начните с добавления заголовков к вашему объекту данных: 

data () => ({
  ...
  headers : {
    id_section : {
       text : 'ID',
       reverse : true
    }
  }
})

Затем обновите свой шаблон, чтобы также изменить обратное значение при нажатии: 

  <th v-for="(val,key) in headers" @click="sortBy=key; val.reverse=!val.reverse">
   {{ val.text }}
  </th>

Наконец, включите обратное значение в Ваша функция сортировки: 

userInfoSorted () {
    const sortBy = this.sortBy
    const r = this.headers[sortBy].reverse ? -1 : 1;
    if (!sortBy) return this.userInfo
    return this.userInfo.sort((a,b)=> a[sortBy] > b[sortBy] ? 1*r : -1*r)
  }
...