vue+element列表排序
2023-09-14 08:59:01 时间
1.默认排序很简单
在el-table标签中加入默认属性
:default-sort ="{prop:'date',order:'descending'}"
然后在单独一列中
<el-table-column
prop="date"
label="日期"
sortable
width="120”>
</el-table-column>
2.后台排序
需要根据需要给后台发送信息,让后台做一些操作
首先在el-table标签中加入事件监听
@sort-change='sortChange'
然后单独一列中设置:
<el-table-column
prop="name"
label="姓名"
sortable='custom'
width="120">
</el-table-column>
然后方法的实现:
methods: {
sortChange(column, prop, order) {
//点击排序按钮后拿到column.order,可以发送column.order给后台,后台再根据什么排序来返回排序过后的数据
console.log(column + '---' + column.prop + '---' + column.order)
//输出的结果 [object Object]---name---ascending
},
}
3.指定列值的格式化
<el-table-column
prop="address"
label="地址"
:formatter="formatter"
show-overflow-tooltip>
</el-table-column>
Methods{
formatter(row, column) {
return row.rowNum +'.'+ row.address;
},
}
我们可以看到展现方式里边统一都有[rowNum].[地址]
相关文章
- Vue - 父子级的相互调用
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue.js3.2.6:路由处理404报错(vue-router@4.0.11)
- vue全局组件和局部组件
- vue+element列表排序
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- vue v-show指令
- Atitit vue绑定json列表数据到表格最小简化培训版本 目录 1.1. 引入类库jq与vue1 1.2. 获取ajax数据并推送到vue的内部自定义变量1 1.3. 建立表格与vue变量
- vue项目目录结构
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue中class动态绑定值拼接字符串
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue 3.0 suspense组件
- vue隐藏列表点击当前列表项,显示列表详情,其它列表项隐藏
- vue3.0 没有 vue.condig.js 解决
- spring boot+vue前后端项目的分离(我的第一个前后端分离项目)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue——组件
- Vue、Vuejs从入门到精通 | vue-router详解
- 038:vue+openlayers导出 image 形式地图(示例代码)
- Vue(八)vue 脚手架、脚手架创建项目示例
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue中一个组件导入另一个组件
- Vue: vue-router路由