element ui table 后端排序并且列显示隐藏功能

要实现 Element UI Table 的后端排序，需要在 Table 的属性中加入 `sort-method`，并且在该属性中指定一个排序方法。该方法会在 Table 排序时被调用，并且会将当前排序的列信息作为参数传入。你可以在该方法中向后端发送请求，获取排序后的数据。

例如，我们可以定义一个 `handleSortChange` 方法来处理 Table 的排序事件：

handleSortChange(sort) {
  this.sortProp = sort.prop;
  this.sortOrder = sort.order;
  this.getData();
},

在 `getData` 方法中，我们可以向后端发送请求，获取排序后的数据：

getData() {
  // 向后端发送请求，获取排序后的数据
  fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify({
      sortProp: this.sortProp,
      sortOrder: this.sortOrder,
      // 其他查询条件
    })
  })
    .then(response => response.json())
    .then(data => {
      this.tableData = data;
    });
},

对于列显示隐藏功能，我们可以使用 Table 的 `show-header` 和 `show-summary` 属性来控制表头和总结行的显示，使用 Table 的 `prop` 属性来控制列的显示。

例如，我们可以定义一个 `columns` 数组来存储所有的列信息：

columns: [
  { prop: 'name', label: '姓名', visible: true },
  { prop: 'age', label: '年龄', visible: true },
  { prop: 'gender', label: '性别', visible: false },
  { prop: 'address', label: '地址', visible: false },
  { prop: 'phone', label: '电话', visible: true },
],

在 Table 中，我们可以使用 `v-for` 循环遍历 `columns` 数组，同时在每一列的 `el-table-column` 上绑定 `v-if` 条件来控制列的显示：

<el-table :data="tableData" :show-header="showHeader" :show-summary="showSummary">
  <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :visible="col.visible" v-if="col.visible"></el-table-column>
</el-table>

在组件中，我们可以使用一个 `toggleColumn` 方法来控制列的显示和隐藏：

toggleColumn(prop) {
  const column = this.columns.find(col => col.prop === prop);
  column.visible = !column.visible;
},

在模板中，我们可以使用 `el-switch` 控件来触发 `toggleColumn` 方法：

<div v-for="col in columns" :key="col.prop">
  <el-switch v-model="col.visible" @change="toggleColumn(col.prop)">{{ col.label }}</el-switch>
</div>

这样，当我们点击开关时，就可以实现列的显示和隐藏了。