Web前端-Vue ElementUI点击Table 索引行获取index处理_elementui table index-程序员宅基地

技术标签: Web前端  table  

需求:在table中row行 index = 0 ,作为区头,数据字符展示 "--"

参考组件  Element - The world's most popular Vue UI framework

1、table中有一个:row-class-name="tableRowClassName"属性,可以获取到当前行的index

:row-class-name属性写在el-table标签上,如下:

   <el-table
      ref="treeMultipleTable"
      v-loading="loading"
      :data="treeList"
      v-model="showAddRootBtn"
      v-if="showAddRootBtn==false"
      row-key="rootId"
      :row-class-name="tableRowClassName"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @select="treeSelect"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column prop="remark" label="备注" width="200" >
        <template slot-scope="scope" >
          <span>{
   { scope.row.index !== 0 ? scope.row.remark : '--' }}</span>
        </template>
      </el-table-column>

    </el-table>

 2、<template slot-scope="scope">

element-ui中的table组件,是一个自定义列的模板 

template(模版) 在这里属于一个固定用法: <template slot-scope="scope">

scope

按照element上的提示:

通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据

我们可以理解为:tableData是给到table的记录集,scope是table内部基于tableData生成出来的,我们可以用Excel描绘一下

 我们传进去的tableData,在table内部生成了类似于Excel的scope,因此,通过scope.row.date,我们就可以读取到每一行中的date。

还有重要的一点,scope又并非是整个table,我们只是能通过scope.row获得当前的行数据

3、获取行之后,可以选择操作;把每一行的索引放进row

构造row的index,后续用到时只需要row.index获取索引,从0开始,使用判断   

//js方法
<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
          //把每一行的索引放进row
          row.index = rowIndex;
      }
    },
  }
</script>

当然,我们还可以有其他操作,比如:设置某行样式不同,背景颜色不同等

//js方法
<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
  }
</script>


//样式
<style>
  .el-table .warning-row {
    background: #ffffff;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/MinggeQingchun/article/details/119741657

智能推荐

分布式系统理论学习总结_分布式系统及其理论-程序员宅基地

文章浏览阅读3.7k次。分布式理论CAPCAP定理讲的是三个性。consistency数据一致性,availability可用性,partition tolerance分区容错性。三者只能选其中两者。为什么呢,看看这三个性质意味着什么吧。首先看看分区容错性,分区容错性指的是网络出现分区(丢包,断网,超时等情况都属于网络分区)时,整个服务仍然可用。由于网络分区在实际环境下一定存在,所以必须首先被考虑..._分布式系统及其理论

qt 登陆界面账号和密码的验证_qt ui 设计 怎么做槽 密码认证-程序员宅基地

文章浏览阅读1.6w次。这几天一直研究怎么让界面账号和密码验证的问题特别想用数据库,一直有QSQLlitdatabase cant find 的问题 找了很多方法没成功 要交课设 所以放弃用其他方法 用文件存吧 比较省事但是有个更简单的办法 哈哈   先看 转到槽函数user那是显示的信息 头文件加上QMessageBox  最后那行 获得焦点 倒数第二行清楚输入 结合我之前发的登陆界面到主界_qt ui 设计 怎么做槽 密码认证

串口通讯以及MPAndroidchart画图的使用(kotlin)_int count=linedatasets.get(0).getentrycount();-程序员宅基地

文章浏览阅读3.9k次,点赞3次,收藏9次。目录一.Kotlin串口通讯实现... 21.1导入基础库... 21.2 效果展示... 31.3布局界面... 412.1 代码... 41.4 Activity实现代码... 913.1 实列化... 91.3.2 适配波特率以及获取本机串口号,进行串口监听... 9二.MPAndroidChart图表使用... 132.1导入基础库... 132.1.1.引入开源库... 132.1.2在app根目录的buil.gradle文件中加入依赖... 1.._int count=linedatasets.get(0).getentrycount();

【Kubernetes】Pod调度到指定Node_双实例pod 调度到不同node-程序员宅基地

文章浏览阅读2.4w次。问题描述   Kubernetes有着自己特定的调度算法与策略,有Master中的Scheduler组件来实现,根据Node资源使用情况自动调度Pod的创建,通常可以满足我们大部分的需求。但是有时我们希望可以将某些Pod调度到特定硬件节点上,这里采用目前最为简单的nodeName和nodeSelector来实现Pod调度。  假设以下场景:有三个Node,分别为107、108、109,创建De_双实例pod 调度到不同node

angular6使用ngx-bootstrap/modal_ngx-bootstrap modal-程序员宅基地

文章浏览阅读6.4k次。首先下载ngx-bootstrap:npm install ngx-bootstrap --save下载后,在module.ts中导入ngx-bootstrap/modal类:import { ModalModule } from 'ngx-bootstrap'; imports: [ ... ModelModule, ModalModule.forRoot(..._ngx-bootstrap modal

Centos7利用rpm升级OpenSSH到openssh-8.1p1版本_openssh8.1升级使用rpm-程序员宅基地

文章浏览阅读3.4k次。参考:https://www.cnblogs.com/fsckzy/p/10834550.html Centos 升级至 OpenSSH 8 rpm包制作RPM打包使用的是rpmbuild命令,这个命令来自rpm-build软件包,这个是必装的。yum install rpm-build -y #安装rpm-build软件,以提供rpmbuild命令 69 ssh -V 70 rpm -qa openssh 71 yum install rpm-..._openssh8.1升级使用rpm

随便推点

训练网络报错device-side assert triggered_device-site-程序员宅基地

文章浏览阅读225次。出现以下:​Assertion 'indexValue>=0 && indexValue < src.sizes[dim]​应该是分类数和路径所指向的类别数不匹配。_device-site

关于Unity中的UGUI优化,你可能遇到这些问题-程序员宅基地

文章浏览阅读181次。https://blog.uwa4d.com/archives/QA_UGUI-1.html关于Unity中的UGUI优化,你可能遇到这些问题作者:admin/时间:2016年11月08日/浏览:23818 次/分类:厚积薄发关键字界面制作网格重建界面切换加载相关字体一、界面制作Q1:UGUI里的这个选项 ,应该是ET..._ugui 文字过多 很卡

一看就会(废)的最小二乘法推导_最小二乘拟合流程图-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏9次。一、预备知识:方程组解的存在性及引入  最小二乘法可以用来做函数的拟合或者求函数极值。在机器学习的回归模型中,我们经常使用最小二乘法。我们先举一个小例子来走进最小二乘法。  某次实验得到了四个数据点(x,y):(1,6)、(2,5)、(3,7)、(4,10)(x,y):(1,6)、(2,5)、(3,7)、(4,10)(x,y):(1,6)、(2,5)、(3,7)、(4,10) (下图中红色的点)。我们希望找出一条与这四个点最匹配的直线 y=θ1+θ2xy = \theta_{1} + \theta_{_最小二乘拟合流程图

nodejs 控制台美化 console-color-mr_node控制台打印美化-程序员宅基地

文章浏览阅读4.1k次。console-color-mr插件可以让node控制台输出带有颜色,是一个不错的插件,通过颜色可以更直观的分析程序bug一、使用npm install -D console-color-mr// 方法一import 'console-color-mr'console.log(`.....`.red);// 方法二import _console from 'consol..._node控制台打印美化

WIN10删除微软拼音输入法,设置默认输入法为英文_微软拼音输入法删除后没有纯英文输入怎么办-程序员宅基地

文章浏览阅读1k次。WIN10删除微软拼音输入法,设置默认输入法为英文删除微软拼音输入法设置英文为默认输入方式删除微软拼音输入法在安装好自己熟悉的输入法后,我通常会将系统自带的微软拼音输入法删除,但系统又总是会自动重装上去。解决的办法很简单,删除以后,再手动添加一次微软拼音输入法,然后再一次删除,以后系统就不会再次自动重装了。设置英文为默认输入方式然后点高级键盘设置,选择默认输入法..._微软拼音输入法删除后没有纯英文输入怎么办

java打印一个三角形_java使用float函数打印三角形-程序员宅基地

文章浏览阅读192次。java打印一个三角形public class Day1 { //打印一个5行三角形 public static void main(String[] args) { for (int i = 1; i <= 5; i++) { //设置好需要打印的行数 for (int i1 = 5; i1 >=i; i1--) { //嵌套的第一个for循环,作用从5到1打印空格,打印5个空格后, _java使用float函数打印三角形