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的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python交易记录整合交易类详解
2019/07/03 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
酒店门卫岗位职责
2013/12/29 职场文书
课例研修方案
2014/05/31 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
招标授权委托书样本
2014/09/23 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫