vue+elementUI中表格高亮或字体颜色改变操作

 更新时间:2020年11月02日 16:19:11   作者:༺༂鑫༒海༂༻  
这篇文章主要介绍了vue+elementUI中表格高亮或字体颜色改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

重点的代码:

: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中表格高亮或字体颜色改变操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 基于Vue3自定义实现图片翻转预览功能

    基于Vue3自定义实现图片翻转预览功能

    这篇文章主要为大家详细介绍了如何基于Vue3自定义实现简单的图片翻转预览功能,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以参考一下
    2023-10-10
  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    这篇文章主要给大家介绍了关于vue.js实现刷新当前页面的方法教程,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • VUE 全局变量的几种实现方式

    VUE 全局变量的几种实现方式

    这篇文章主要介绍了VUE 全局变量的几种实现方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue的兼容性解决方案Babel-polyfill案例解析

    Vue的兼容性解决方案Babel-polyfill案例解析

    这篇文章主要介绍了Vue的兼容性解决方案Babel-polyfill的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue3.0实践之写tsx语法实例

    vue3.0实践之写tsx语法实例

    很久不写博客了,最近在使用ts和tsx开发vue类项目,网上资料比较少,顺便记录一下方便同样开发的人互相学习共同进步,下面这篇文章主要给大家介绍了关于vue3.0实践之写tsx语法的相关资料,需要的朋友可以参考下
    2022-07-07
  • vue项目中实现多文件上传功能实例代码

    vue项目中实现多文件上传功能实例代码

    我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue子组件如何获取父组件的内容(props属性)

    vue子组件如何获取父组件的内容(props属性)

    这篇文章主要介绍了vue子组件获取父组件的内容(props属性),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论