viewUi的table里面的排序功能

通过给 columns 数据的项,设置 sortable: true,即可对该列数据进行排序。

这个是系统的排序。

自定义排序

设置属性 sortMethod 指定一个自定义排序函数,接收三个参数 abtype

   {
          title: "标签值",
          key: "dkey",
          align: "center",
          sortable: true,
          sortMethod:function(a,b,type) { 
            console.log(a,b,type); if (type == 'desc') { return parseInt(a) > parseInt(b)? -1 : 1 } else { return parseInt(a) < parseInt(b)? -1 : 1 }
          }
        },

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现 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> ``` 这样,当我们点击开关时,就可以实现列的显示和隐藏了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值