vue+elementUI中表格高亮或字体颜色改变操作
重点的代码:
:row-style="setRowStyle"这个属性就是在table标签绑定的
:row-style="setRowStyle"
// 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } },
具体代码:
hmtl
<el-table width="100%" :data="gridData" border fit highlight-current-row :header-cell-style="{background:'#199ED8'}" :row-style="setRowStyle"> <el-table-column label="序号" type="index"></el-table-column> </el-table>
js中就是方法的调用就好了
setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } },
补充知识:vue+element-ui 表单的 el-input 第二次修改时无法输入
由于新增跟修改用的是同一个弹窗,所以当修改提交时,要清空 input 框内的值。
提交时不能只把 父对象formData 设置为空对象。即this.formData = {} 是错误的
正确的写法为
this.formData = {name: '' }
原因:如果把this.formData设置为空,this.formData.name 就是 undefined,此时就会赋值不上。
<el-form ref="popupContent" :model="formData" :rules="popupContentRules"> <el-row> <el-form-item label="姓名" label-width="80px" prop="name"> <el-input name="name" @keyup.native="judge" v-model="formData.name"/> </el-form-item> </el-row> </el-form>
以上这篇vue+elementUI中表格高亮或字体颜色改变操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue实现导航栏点击当前标签变色功能
本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v
-
Element-UI中关于table表格的那些骚操作(小结)
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s
-
vue修改Element的el-table样式的4种方法
修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c
-
vue+elementUI中表格高亮或字体颜色改变操作
重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&
-
Vue element-ui中表格过长内容隐藏显示的实现方式
目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且
-
vue element-ui table表格滚动加载方法
添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.
-
vue elementUI table表格数据 滚动懒加载的实现方法
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎
-
vue element-ui中table合计指定列求和实例
注意点: 1. <el-table> 中 加:summary-method="getSummaries" 2. <el-table-column> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[ind
-
vue+element-ui中form输入框无法输入问题的解决方法
目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 总结 一.问题发现: 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容. 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在.最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model.如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考. 二.正确案例与错误原理: 查看官网对于表单Form一栏的使
-
Vue+element-ui 实现表格的分页功能示例
本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
-
解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里
-
解决vue elementUI中table里数字、字母、中文混合排序问题
1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q
-
详解Vue+elementUI build打包部署后字体图标丢失问题
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(
随机推荐
- 【MyBatis源码全面解析】MyBatis一二级缓存介绍
- 详解redis数据结构之sds
- JavaScript中property和attribute的区别详细介绍
- Mybatis利用OGNL表达式处理动态sql的方法教程
- Python实现拷贝多个文件到同一目录的方法
- 多域名绑定到一个空间访问不同首页的技巧
- JavaScript DOM 学习第五章 表单简介
- javascript稀疏数组(sparse array)和密集数组用法分析
- JavaScript6 let 新语法优势介绍
- readonly和disabled属性的区别
- JS加jquery简单实现标签元素的显示或隐藏
- javascript中的self和this用法小结
- sxs.exe的查杀bat代码
- Android编程实现随机生成颜色的方法示例
- BootStrap与Select2使用小结
- PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
- MTK Android平台开发流程
- Java语言实现基数排序代码分享
- 漂亮的Android音乐歌词控件 仿网易云音乐滑动效果
- Vue中的无限加载vue-infinite-loading的方法