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中combobox多选的不兼容问题总结
Dec 24 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Django的性能优化实现解析
2019/07/30 Python
python实现静态web服务器
2019/09/03 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
详解Python 最短匹配模式
2020/07/29 Python
python计算auc的方法
2020/09/09 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
入党推优材料
2014/06/02 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
pycharm代码删除恢复的方法
2021/06/26 Python