如何使用 Vue.js 在 Laravel 中对表格进行排序答案

【问题标题】：How to Sort Table in Laravel using Vue.js如何使用 Vue.js 在 Laravel 中对表格进行排序
【发布时间】：2019-08-04 15:25:52
【问题描述】：

我正在尝试使用 Vue.js 在 Laravel 中制作一个排序表。我在互联网上尝试了一些解决方案，但它仍然不适合我。

这是我的模板文件：

<template>
  <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th v-for="column in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(emp, key) in emp">
          <td>{{ emp.id }}</td>
          <td>{{ emp.emp_name }}</td>
          <td>{{ emp.salary }}</td>
          <td>{{ emp.phone_number }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

我的脚本文件：

<script>
export default {
  data() {
    return {
      emp: [],
      columns: ['No','Name', 'Salary', 'Phone Number']
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser(){    
      fetch('api/employee').then(res => res.json())
      .then(res => {
        this.emp = res.data;
        console.log(res);
      })
    },  
  }
}
</script>

感谢您的帮助。提前谢谢..

【问题讨论】：

错误是什么？
我不知道怎么sort table
排序是什么意思，你可以从后端[laravel]对数据进行排序
想用vue.js 兄弟点击排序
<div v-if="reverseList"> {{ reverseList }} </div> <button v-on:click="reverseList">Reverse list</button> methods: { reverseList() { return emp.reverse(); } }

标签： php laravel vue.js

【解决方案1】：

new Vue({
  el: "#app",
  data() {
    return {
      emp: [{
          id: 1,
          emp_name: "Andrew",
          salary: 256,
          phone_number: "123"
        }, {
          id: 2,
          emp_name: "John",
          salary: 512,
          phone_number: "321"
        },
        {
          id: 3,
          emp_name: "Sam",
          salary: 1024,
          phone_number: "456"
        }
      ],
      columns: [{
        label: "No"
      }, {
        label: "Name",
        key: "emp_name",
        sortable: true
      }, {
        label: "Salary",
        key: "salary",
        sortable: true,
        isNumber: true
      }, {
        label: "Phone Number"
      }],
      sortKey: "",
      sortOrder: "desc"
    }
  },
  computed: {
    sortedEmp() {
      if (!this.sortKey) return this.emp;

      const arr = JSON.parse(JSON.stringify(this.emp));
      const {
        sortKey,
        sortOrder
      } = this;

      if (this.columns.find(column => column.key === sortKey).isNumber) {
        arr.sort((a, b) => this.numberComporator(a[sortKey], b[sortKey]));
      }

      return sortOrder === "asc" ? arr : arr.reverse();
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      fetch('api/employee').then(res => res.json())
        .then(res => {
          this.emp = res.data;
        })
    },
    sortHandler(key) {
      if (key === this.sortKey) {
        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      } else {
        this.sortKey = key;
      }
    },
    numberComporator(a, b) {
      return a - b;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.label">
          {{ column.label }}
          <button v-if="column.sortable" type="button" @click="sortHandler(column.key)">
            Sort
            <span v-if="sortKey === column.key">{{ sortOrder }}</span>
          </button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="emp in sortedEmp" :key="emp.id">
        <td>{{ emp.id }}</td>
        <td>{{ emp.emp_name }}</td>
        <td>{{ emp.salary }}</td>
        <td>{{ emp.phone_number }}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

你需要什么解释？）