vue+element表头根据查询条件动态改变

示例图：

需求：表头这个统计时段可以自定义，当然，也要把这个值传到查询的api里

//控件使用代码 改变时触发这两个方法： @change="handleChangeMin" @change="handleChangeMax"
<div class="input-container"><div class="input-title">时长统计:</div><div class="input-number"><el-input-number v-model="listQuery.min" controls-position="right" :min="1" :max="listQuery.max" @change="handleChangeMin" /><div class="textStyle">到</div><el-input-number v-model="listQuery.max" controls-position="right" :min="listQuery.min" :max="12" @change="handleChangeMax" /><div class="textStyle">小时</div></div>
</div>//表头代码，主要代码是:label="lessThan" 将这个变量放在data中，就可以在方法中改变表头了（拷贝过来多了一下空格，我不想整理了）<el-table-column :label="lessThan" prop="CountLessThan3H" align="center" width="90px"><template slot-scope="scope"><span>{{ scope.row.CountLessThan3H }}</span></template></el-table-column><el-table-column :label="middle" prop="Count3HTo6H" align="center"><template slot-scope="scope"><span>{{ scope.row.Count3HTo6H }}</span></template></el-table-column><el-table-column :label="moreThan" prop="CountMoreThan6H" align="center" width="90px"><template slot-scope="scope"><span>{{ scope.row.CountMoreThan6H }}</span></template></el-table-column>//data中的数据
data() {return {lessThan: '小于3小时',middle: '3到6小时',moreThan: '大于6小时'}
}//methodshandleChangeMin(value) {console.log('value========min')console.log(value)this.lessThan = '小于' + value + '小时'this.middle = value + '到' + this.listQuery.max + '小时'},handleChangeMax(value) {console.log('value========max')console.log(value)this.moreThan = '大于' + value + '小时'this.middle = this.listQuery.min + '到' + value + '小时'},//style css代码，改变input-number样式
.input-title + .el-input-number{margin-left: 12px;
}
.textStyle{padding:0px 5px;color:#fff;
}
.input-number{display: flex;flex-direction: row;align-items:center;margin-left: 12px;.el-input{width: 80px !important;}.el-input-number--medium{width: 80px;}.el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease{line-height: 15px;width: 30px;}.el-input-number.is-controls-right .el-input__inner{padding-right:44px}
}.el-input-number__increase, .el-input-number__decrease{color: #fff;
}

vue+element表头根据查询条件动态改变相关推荐

vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize
rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...
Vue Element UI 基础多条件查询+重置
首先我们用Element UI的话就得下载和引入相对应的东西,下面是网址 https://element.eleme.io/#/zh-CN/component/installationhttps:/ ...
html th中加斜杠,vue element 表头添加斜线
filters: {}, data() {return{ tableData3: [{ date:'2016-05-03', name:'王小虎', province:'上海', city:'普陀区' ...
Elasticsearch教程(27) ES拼接查询条件的工具类
一.前言在大多数公司产线Elasticsearch还在6.X的时候,ES已经更新到8.X了,这更新速度也太快了. 目前我手上的项目也做到一套工具类兼容ES6.1到ES7.9+.我用的是原生的ES6. ...
ABP 多模块关联查询、分组统计、列转行、Vue 复合表头动态列
本文记录了一次使用abp Core5 ,vue 开发复杂报表的经历. 0.需求概述业务需求是:统计一个化工厂车队形式记录数据中异常停车的报表,维度可以按照车俩.驾驶员两个维度进行统计,统计的元素有: ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
vue在使用element时使用video视频地址切换视频动态改变
vue在使用element时使用video视频地址切换视频动态改变今天用vue在写element的table时,在table中使用video动态渲染,但是渲染上的视频地址修改后,发现之前的视频还在, ...
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
先看最终的效果: 最近项目上有一个需求,VUE前端要实现动态查询条件组件,后端就能够动态组装SQL. 要模仿人家Azure Devops的查询功能,我丢,Azure Devops是人家微软开发的个东西 ...
封装element中的table表格动态渲染（动态表头，可操控列）
vue+element实现动态表格:根据后台返回的属性名和字段动态生成表头可变表格由于项目需求,需要有一个动态表格,可以根据配置或从后台获取表格属性列.并加上了某一行需要点击跳转和操作列里面的功能 ...

vue+element表头根据查询条件动态改变

vue+element表头根据查询条件动态改变相关推荐

最新文章

热门文章