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

赞 (0)

相关推荐

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • Element-UI中关于table表格的那些骚操作(小结)

    Element-UI中关于table表格的那些骚操作(小结)

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • Vue实现导航栏点击当前标签变色功能

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • 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=&

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

  • vue element-ui中table合计指定列求和实例

    注意点: 1. <el-table> 中 加:summary-method="getSummaries" 2. <el-table-column> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[ind

  • vue+element-ui中form输入框无法输入问题的解决方法

    目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 总结 一.问题发现: 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容. 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在.最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model.如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考. 二.正确案例与错误原理: 查看官网对于表单Form一栏的使

  • Vue+element-ui 实现表格的分页功能示例

    Vue+element-ui 实现表格的分页功能示例

    本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q

  • 详解Vue+elementUI build打包部署后字体图标丢失问题

    错误描述: Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(

随机推荐