Vue 格式formatter

初次学习，感觉网上内容较少，有些内容又格式复杂对初学者不好理解

先看演示效果，下图找不同~嘿嘿~

修改前 修改后

具体操作：

1、Vue表格列表数据显示百分号%

定义表格元素

标签：属性名，格式，标签名称

        <el-table-column:resizable="false"prop="battery":formatter="batteryformatter" label="设备电量"></el-table-column>

定义格式显示，需要使用方法methods框，

  methods: {//电量格式-百分号batteryformatter(row){return row.battery + "%";},
}

2、Vue显示数字改为自定义内容

<el-table-column:resizable="false"prop="pattern":formatter="patternformatter"label="设备模式"></el-table-column>

定义格式显示的方法，也要使用methods，

 methods: {
//设备模式格式patternformatter(row){switch (row.pattern) {case 1:return "在线";case 2:return "离线";}
},
//   方法2，学习新的方法，有助于理解别人代码，使用时注释拿掉
//   patternformatter(row)
//     {
//         return row.pattern == 1
//         ? "在线"
//         : row.pattern == 2
//         ? "离线"
//         : "未知状态";
// },
}

Vue element-ui 数据表头下拉，点击筛选数据

效果预览，点击筛选，鼠标触碰显示蓝色，不过具体大数据参数还是要后端返回操作

<el-table-column:resizable="false"prop="bindingState"label="设备绑定状态":formatter="showBindingStatus"><template slot="header" slot-scope="scope"> <el-dropdown trigger="click" size="medium " @command="bindingStateCommand"><span style="color:#909399">{{ menuText }}<i class="el-icon-arrow-down el-icon--right" /></span><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="(item, index) in section":key="index":command="item">{{ item }}</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column>//数据栏选择data() {menuText: '设备绑定状态',section: ['绑定','未绑定',],
}methods: {//数据栏-设备绑定状态筛选bindingStateCommand(item) { console.log(item,"设备绑定状态筛选=============");this.menuText = itemreturn row.bindingState = item ;},
}

Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据相关推荐

Vue实现动态加载页面数据（下拉加载新数据）
1 设置数据 //页面不同组的所有数据alldata:[],//当前的页数page: 1, 2 更新页面格式 <div > <d ...
选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现，选择下拉菜单某一项，该表格中就出现选项对应的数据？...
如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...
excel中通过下拉菜单显示不同的报表内容，类似下拉选项中，一旦切换内容，后面的表格内容全都不同？
EXCEL是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为我们的工作带来不少方便.我们可以在EXCEL中设置下拉菜单,以方便我们输入相同内容.本文就以将性别设置为下拉菜单为例,介绍具 ...
用mescroll实现无限上拉增加数据，下拉刷新数据 (学习笔记)
最近自己做一个web app需要用到上拉查询下页数据,网上看了很多很多帖子,发现并不能快速的套用,总是会出现各种问题无法使用,于是无奈自己跑去看了官方api文档,终于做了出来,至此做个笔记,以后用到可 ...
Android Spinner控件显示数据和下拉选中数据分离
项目即将快完工了,还有两个关键的部分,心情还是很激动的,经过两个月的从零开始,学到的都已经记录在博客里了,主要涉及的是fragment还有一些乱码解决. 适配器的实际的解决方案,博客地址为:http: ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
Vue中实现特效下拉加载更多数据
1.功能需求其实在很多的页面开发过程中,有些页面尤其是评论页面,在第一次加载的时候并不会加载很多的相关数据,而是加载一部分,当用户下拉旁边的滚动条时,尤其是滚动条移动到底部的时候,就会出现行的相关内 ...
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
<template><div class="sg-page-body"><div class="sg-list"><v ...
vue前端实现从数据库获取数据的下拉框以及带参请求
一.下拉框的实现 <el-form-item><el-select @change="getOptions" v-model="type" p ...

Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据

Vue 格式formatter

1、Vue表格列表数据显示百分号%

2、Vue显示数字改为自定义内容

Vue element-ui 数据表头下拉，点击筛选数据

Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据相关推荐

最新文章

热门文章