vue+elementUI中表格高亮或字体颜色改变操作


Posted in Javascript onNovember 02, 2020

重点的代码:

: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中表格高亮或字体颜色改变操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue element-ui中table合计指定列求和实例
Nov 02 #Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 #Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 #Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 #Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
基于Python实现的ID3决策树功能示例
2018/01/02 Python
团日活动策划书
2014/02/01 职场文书
会务接待方案
2014/02/27 职场文书
联谊活动总结
2014/08/28 职场文书
学雷锋的心得体会
2014/09/04 职场文书
新郎结婚保证书
2015/02/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
学生检讨书范文
2019/06/24 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
python3 hdf5文件 遍历代码
2021/05/19 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA