1.ElementUI中table的sortable使用

ElementUI中table的sortable使用

ElementUI-table

1.业务分析

将相对应的字段进行升序或者降序，在后台管理系统中，后端返回的指定的页面的数据，所有后端将排序做好，前端传：排序字段和排序方法

效果：默认升序，点击排序的icon，上箭头升序，下箭头降序

2.实现

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

elementUI-table

具体代码

<template>
  <div style="padding:20px;height:100%" class="resolve">
    <el-table
      :data="tableData"
      stripe
      border
      @sort-change="changeTableSort"
      style="width:100%;"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="200"
      ></el-table-column>
      <el-table-column prop="payDate" label="payDate"></el-table-column>
      <el-table-column
        prop="come"
        label="come"
        sortable="custom"
      ></el-table-column>
      <el-table-column prop="pay" label="pay"></el-table-column>
      <el-table-column prop="money" label="money"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        :page-size="5"
        :current-page="currentPage"
        @current-change="handlePageCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getHomeData } from "@/api/index";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      fieldName: "",
      sortMethod: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var data = {
        pageIndex: this.currentPage,
        pageSize: 10,
        come: this.sortMethod, // 排序的字段：排序的方式(升序/降序)
      };
      getHomeData(data).then((res) => {
        console.log(res);
        console.log("table", res.data.content);
        if (res.code == 0) {
          this.tableData = res.data.content;
        }
      });
    },
    handlePageCurrentChange(value) {
      console.log("value", value);
      this.currentPage = value;
      this.getData();
    },
    // 排序
    changeTableSort(column) {
      console.log("column", column);
      // this.fieldName = column.prop;
      var sortingType = column.order;
      sortingType == "ascending"
        ? (this.sortMethod = "ASC")
        : (this.sortMethod = "DESC");
      this.getData(this.sortMethod);
    },
  },
};
</script>

<style scoped>
.resolve {
  overflow-y: auto;
}
.block {
  margin-top: 20px;
}
</style>

在需要排序的字段上增加sortable=“custom”,el-table增加@sort-change事件监听排序

Mock模拟后端

Mockjs

npm install --save mockjs

// Mock/mock.js
import Mock from "mockjs";
let list = []; //保存数据

for (var i = 0; i < 100; i++) {
  //循环100次
  list.push({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    address: Mock.mock("@county(true)"), //北京市 昌平区 北七家镇
    payDate: Mock.Random.datetime(),
    payType: Mock.Random.integer(0, 8), //类型 【1，  8】
    come: Mock.Random.integer(0, 9999),
    pay: Mock.Random.integer(0, 9999),
    money: Mock.Random.integer(0, 9999),
  });
}


export default Mock.mock(/\/user\/list/, "post", (data) => {
  console.log("data", data);
  var info = JSON.parse(data.body);
  var [index, size, come, total] = [
    info.pageIndex,
    info.pageSize,
    info.come,
    list.length,
  ];
  var len = total / size;
  var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len;
  console.log('come',come);
  if (!come || (come && come == "ASC")) {
    list.sort(function(a, b) {
      return a.come - b.come;
    });
  } else if (come == "DESC") {
    list.sort(function(a, b) {
      return b.come - a.come;
    });
  }
  var newDataList = list.slice((index - 1) * size, index * size);
  return {
    code: "0",
    message: "success",
    data: {
      pageIndex: index,
      pageSize: size,
      content: newDataList,
      total: total,
      totalPages: totalPages,
    },
  };
});

// main.js
import './mock/mock'

request axios

npm install --save axios

// utils/request.js
//请求工具类
import axios from 'axios'

//1.创建server
const server = axios.create({
    baseURL:'localhost:8080',
    timeout:5000
})
//2.请求拦截
server.interceptors.request.use(config=>{
    return config
})
//3.响应拦截
server.interceptors.response.use(res=>{
    return res.data
})

export default server

api

//接口管理
import request from '../utils/request'

//1.获取list数据
export function getHomeData(data){
    return request({
        url:'/user/list',
        method:'post',
        data:data
    })
}