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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
node.js中的console用法总结
Dec 15 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
js倒计时简单实现代码
Aug 11 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
js生成word中图片处理方法
Jan 06 Javascript
Paypal支付不完全指北
Jun 04 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验证是否是md5编码的简单代码
2014/04/01 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php编程每天必学之表单验证
2016/03/01 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
点球小游戏python脚本
2018/05/22 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
《莫高窟》教学反思
2014/02/25 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
自我检讨书范文
2015/01/28 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
公司禁烟通知
2015/04/23 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python