vue之排序后端排序功能的实现

实现了使用后端的排序，前端只负责向后端发送请求要数据就可以了。
整个代码的简单逻辑就是，后端定义好的接口，前端使用逻辑获取前端是想正序、逆序还是无排序，然后将排序拼接到url中，发送给后端就行了。

代码如下：

<el-table :data="tableData"
  style="width: 100%"
  :height="tableHeight"
  :cell-style="{ textAlign: 'center' }"
  :header-cell-style="{ 'text-align': 'center' }"
  highlight-current-row
  @sort-change="handleSortChange"
>
<!--上面的@sort-change="handleSortChange"是排序使用的函数-->
  <!--数据展示开始，需要把sortable设置成custom-->
  <el-table-column prop="a" label="a" sortable="custom" width="100"/>
  <el-table-column prop="b" label="b" sortable="custom" width="180"/>
  <el-table-column prop="c" label="c" sortable="custom" width="100"/>
  <el-table-column prop="d" label="d" sortable="custom" width="150"/>
</el-table>

<!--排序功能-->
<div class="pagination-container">
  <div class="pagination-wrap">
    <el-pagination
      v-model:current-page="filters.page"
      v-model:page-size="filters.size"
      :page-sizes="pagesizes"
      :small="filters.small"
      :disabled="filters.disabled"
      :background="filters.background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</div>



<script setup>
// 分页逻辑与获取初始化数据
const handleSizeChange = (val) => {
  filters.page = 1;
  filters.size = val;
}

const handleCurrentChange = (val) => {
  filters.page = val
}

// 使用watch函数，当监测到页码发生变化时，获取一下数据
watch(() => filters.page, (newVal, oldVal) => {
  getTableData();
})
watch(() => filters.size, (newVal, oldVal) => {
  getTableData();
})

// 排序功能
const handleSortChange = (sort) => {
  const { prop, order } = sort;
  // 如果当前点击的列已经是排序状态，且当前排序为正序，则变为逆序排序
  if (sort.prop === prop && sort.order === 'ascending') {
    // 因为获取数据函数里面axios传入的参数使用的是filters，所以将排序字段也放到filters中，这样最后的效果就是
    // http://xxx.xxx.xxx.xxx/xxx/?ordering=-xxx 这样表示逆序排序
    filters.ordering = `-${prop}`;
  }
  // 如果当前点击的列已经是排序状态，且当前排序为逆序，则取消排序
  else if (sort.prop === prop && sort.order === 'descending') {
    // 这里发送的请求是：  http://xxx.xxx.xxx.xxx/xxx/?ordering=xxx 这样表示正序排序
    filters.ordering = `${prop}`;
  }
  // 其他情况下，取消排序。因为排序页面点第一下是正序，第二下是逆序，第三下是取消排序，所以这里加入了取消排序
  else {
    filters.ordering = null;
  }
  getTableData();
}


// 获取数据函数
const getTableData = (url = `${config.settings.BASE_URL}/home/general/`) => {
  if (filters.page <= 1) {
    filters.page = 1;
  }
  if (filters.size <= 0) {
    filters.size = 20
  }
  // 这里的url就变成了http://xxx.xxx.xxx.xxx/xxx/?page=x&size=20&ordering=xxx向后端发送请求
  axios.get(url, {params: filters}).then(res => {
    if (res.data.code == 100) {
      tableData.value = res.data.data.results
      total.value = res.data.data.count
    }
  }).catch(res => {
    ElMessageBox.alert('获取数据服务异常', '错误', {
      confirmButtonText: 'OK',
    })
  })
}
</script>