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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
html中table数据排序的js代码
Aug 09 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python sep参数使用方法详解
2020/02/12 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
个人找工作求职简历的自我评价
2013/10/20 职场文书
自荐信写法介绍
2014/01/25 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
个人四风对照检查材料
2014/09/26 职场文书
长征观后感
2015/06/09 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL