要
实现 Element UI
Table 的后端排序，需要在
Table 的属性中加入 `sort-method`，并且在该属性中指定
一个排序方法。该方法会在
Table 排序
时被调用，并且会将当前排序的
列信息作为参数传入。你可以在该方法中向后端发送请求，获取排序后的数据。
例如，我们可以定义
一个 `handleSortChange` 方法来处理
Table 的排序事件：
```javascript
handleSortChange(sort) {
this.sortProp = sort.prop;
this.sortOrder = sort.order;
this.getData();
},
```
在 `getData` 方法中，我们可以向后端发送请求，获取排序后的数据：
```javascript
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` 数组来存储所有的
列信息：
```javascript
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` 条件来
控制列的
显示：
```html
<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` 方法来
控制列的
显示和
隐藏：
```javascript
toggleColumn(prop) {
const column = this.columns.find(col => col.prop === prop);
column.visible = !column.visible;
},
```
在模板中，我们可以
使用 `el-switch` 控件来触发 `toggleColumn` 方法：
```html
<div v-for="col in columns" :key="col.prop">
<el-switch v-model="col.visible" @change="toggleColumn(col.prop)">{{ col.label }}</el-switch>
</div>
```
这样，当我们点击开关
时，就可以
实现列的
显示和
隐藏了。
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
