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捕获超链接事件进行局部刷新代码
May 10 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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 数组实例说明
2008/08/18 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
iPython pylab模式启动方式
2020/04/24 Python
python redis存入字典序列化存储教程
2020/07/16 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
建议书标准格式
2014/03/12 职场文书
运动会口号16字
2014/06/07 职场文书
公司离职证明标准格式
2014/11/18 职场文书
大学生党员自我评价
2015/03/04 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫