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 相关文章推荐
js中的json对象详细介绍
Oct 29 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
javascript变量声明实例分析
Apr 25 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
layui实现三级导航菜单
Jul 26 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
使用Python开发windows GUI程序入门实例
2014/10/23 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python实现LRU热点缓存及原理
2019/10/29 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
小学生竞选班长演讲稿
2014/04/24 职场文书
环境科学专业求职信
2014/08/04 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
数学教师个人总结
2015/02/06 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python