Element Table的row-class-name无效与动态高亮显示选中行背景色

Element UI 的Table组件踩坑记：

（1）参数row-class-name无效的坑：官方文档给出了如下代码：

但是我使用后并没有出现预初想要第一行高亮的效果，然后console.log(row, rowIndex)，发现控制台输出的值均为undefined。最终解决方案是只要传入row或者rowIndex即可，然后根据自己所要的数据而进行处理，后来我修改代码为如下：

tableRowClassName(row) {
 if (row.number === 1 && this.isActive) {
  return 'first-row'
 } else {
  return ''
 }
}

即可创建实例时已经渲染了第一行数据，其中number是我已经定义的第几行（根据自己获取数据结构自行使用）isActive是我等下要控制实现点击所在行而定义的参数，效果图如下：

（二）参数highlight-current-row的使用：

<template>
  <el-table :data="imageList" :row-class-name="tableRowClassName" :highlight-current-row="true" row-key="getNumber" @row-click="checkImage" style="width: 100%">
    <el-table-column prop="number" label="搜索结果（按准确度排序）" style="width: 50%"></el-table-column>
    <el-table-column prop="distance" label="误差值" style="width: 50%"></el-table-column>
  </el-table>
</template>

<script>
export default {
methods: {
  checkImage(row, event, column) {
   this.src = row.img
   this.isActive = false
  },
  tableRowClassName(row) {
   if (row.number === 1 && this.isActive) {
    return 'first-row'
   } else {
    return ''
   }
  }
 },
}
</script>

//下面通过修改原插件的样式来显示点击的当前行，注意由于是原插件全局的，所以style不能使用scope属性
<style>
.current-row > td {
 background: #218af3 !important;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码. 然后直接上template代码: <template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • 详解VUE 对element-ui中的ElTableColumn扩展

    详解VUE 对element-ui中的ElTableColumn扩展

    公司有一个新的需求,点击ElTableColumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下. ElTableColumn本来是这个样子的: 要做成的是这个样子: 我直接就放代码了,挨着挨着说明太多了. 代码的结构: 组件 <!-- ElTableColumnPro.vue --> <template> <el-table-column v-if="visible" :formatter="

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • element ui table 增加筛选的方法示例

    网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • VUE element-ui 写个复用Table组件的示例代码

    饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:

  • Element Table的row-class-name无效与动态高亮显示选中行背景色

    Element UI 的Table组件踩坑记: (1)参数row-class-name无效的坑:官方文档给出了如下代码: 但是我使用后并没有出现预初想要第一行高亮的效果,然后console.log(row, rowIndex),发现控制台输出的值均为undefined.最终解决方案是只要传入row或者rowIndex即可,然后根据自己所要的数据而进行处理,后来我修改代码为如下: tableRowClassName(row) { if (row.number === 1 && this.is

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid

  • vue element table中自定义一些input的验证操作

    官网原话 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 表单 el-form表单必备以下三个属性: :model="ruleForm" 绑定的数据内容 :rules="rules" 动态绑定的rules,表单验证规则 ref="ruleForm" 绑定的对象 template模块 其实问题关键就在于如何给el-form-item动态绑定p

  • element table跨分页多选及回显的实现示例

    1.data中定义getRowKeys,记录每行的key值 getRowKeys(row) {    return row.id; }, 2.el-table绑定getRowKeys <el-table     :data="tableData"     @selection-change="handleSelectionChange"     :row-key="getRowKeys" > 3.将selection列的reserve

  • element table多层嵌套显示的实践

    element table多层嵌套显示的实践

    有个需求是一个列表,里面包含多个单子,每个单子可以是唯一,也可以是多个合并之后的,而且每个单子下面显示的是另外一个表格,来上图 每行的操作还不一样,然后通过官网的一些例子总结了一下合并代码 <template> <div class="app-container"> <div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;&q

  • Element table 上下移需求的实现

    Element table 上下移需求的实现

    目录 前言 思路梳理 这么多细节问题,产品经理咋不讲清楚写明白呢,喷他! 和产品经理一波 battle 后的结果 问题清楚了开始复制粘贴,啊呸!来让我们开始改变世界 表格数据行拖动上下移 表格数据选中点击按钮上下移 一. 基于选中数据定位需要移动到的位置 二. 删除表格中的选中数据 三. 将选中的数据移入指定位置 演示代码地址 前言 Element table 上下移动,听起来是不是很简单的需求,产品的描述也简单:表格数据支持拖动上下移,支持通过选择表格行数据点击按钮上下移.最终效果大概如下(模

  • Element Table行的动态合并及数据编辑示例

    Element Table行的动态合并及数据编辑示例

    目录 正文 思路 1:第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列解决 3:第一列的数据是根据第三列相加得来的 4:弹出个输入框 完整代码 正文 先描述一下需求,看下图 1:动态合并行,如图所示,第一列全部合并,第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列,并且只能编辑属于此合并行的第三列和第四列,比如第一个编辑按钮点击后,只有前三行可以编辑 3:第一列的数据是根据第三列相加得来的 4:点击快捷填写,可以快速填写第三列和第四列 思路 1:第二列和第

  • Vue技巧Element Table二次封装实战示例

    Vue技巧Element Table二次封装实战示例

    目录 前言 思考 实践 filterPane.vue 明确目标 传入数据结构整理 timeSelect elinput elselect 开始封装 tablePane.vue 明确目标 传入数据结构整理 tool cols pageData operation tablePane.vue配置项Cols详解 开始封装 实战 结尾 前言 由于重构后台管理项目中有好多表格页面, 举个栗子 这表格看着还挺好看,写起来叫人直呼XX,多动脑子少掉发,少走弯路多省鞋. 写了一个后感觉太麻烦了,于是我奋笔疾书,

  • Vue ELement Table技巧表格业务需求实战示例

    Vue ELement Table技巧表格业务需求实战示例

    目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当

  • vue element table表格相同名称列合并方式

    目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"

随机推荐