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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
JS中的BOM应用
Feb 02 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
JS加载解析Markdown文档过程详解
May 19 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缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP7修改的函数
2021/03/09 PHP
js常见表单应用技巧
2008/01/09 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
python中dir函数用法分析
2015/04/17 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
简单了解Django模板的使用
2017/12/20 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
生日寄语大全
2014/04/08 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python