<Table
:columns="columns"
:no-data-text="L('NoDatas')"
border
:data="list"
:row-class-name="rowName"
@on-row-click="selectChange"
>
</Table>

JS:

 rowName(row, index) {
if (index == this.treeIndex) {
return "changeColor";
}
}
//表格行选中
selectChange(row, index) {
this.treeIndex = index;
}

Style:

<style>.changeColor td {
background-color: rgba(241, 182, 18, 0.918);
} </style>

vue+iview 表格行选中修改背景色的更多相关文章

  1. vue iview表格应用

    今天看一下iview表格的使用.本文中有以下内容 table的必备部分(columns,data) render函数的使用(判断,添加样式,动态添加class...) slot使用 主要讲render ...

  2. vue Element-ui 表格多选 修改选中行背景色

    实现的效果: 整体思路方式: 1.给获取到的数据添加自定义的className 2.在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className ...

  3. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  4. VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题

    碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==>

  5. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  6. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  7. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  8. iview 表格 某一列中设置radio

    在iview 表格 某一列中设置radio,说白了还是要在render中添加,方法为: { title: '业务参数设置', // key: 'pyCode', align: 'center', re ...

  9. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  10. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

随机推荐

  1. leetcode 655. 输出二叉树 【时间击败100.00%】 【内存击败96.49%】

    1 public List<List<String>> printTree(TreeNode root) { 2 ArrayList<List<String> ...

  2. 前端循环及跳出for循环

    前端循环语句与方法 while循环 语法 1.初始化变量 2.while(条件表达式){逻辑代码循环体} 执行过程: 1.执行初始化变量 2.变量是否满足条件表达式 3.满足执行循环体 4.条件不满足 ...

  3. Finance_CAPM&APT

    ACCA CAPM: https://www.bilibili.com/video/BV1KE411j7Ri?from=search&seid=14840285521502157259 投资学 ...

  4. Astra-20190405

    Usage: astra.py [-h] [-c COLLECTION_TYPE] [-n COLLECTION_NAME] [-u URL] [-headers HEADERS] [-method ...

  5. 「DIARY」PKUSC 2021 游记

    冬令营没了但是还有夏令营 (完蛋,前两天忘写游记了,完全没想起来--最后一天补一补) 试题分析在另外一篇博客上 # Day 0 早上去机场的时候把手机落在出租车上了 (还好之后找回来了),导致我前两天 ...

  6. flume往kafka中导入数据

    1.编辑flume的配置文件 a1.sources = r1 a1.channels = c1 # Describe/configure the source a1.sources.r1.type = ...

  7. 【编程】Python3 正则表达式使用笔记

    前言 Python 从1.5版本开始使用re模块来处理正则表达式.我们可以使用"re模块"或"re.compile方法"来创建正则表达式对象(re.RegexO ...

  8. [自用初学]c++值传递和引用传递/ *&/ string

    https://baijiahao.baidu.com/s?id=1702573193376441989&wfr=spider&for=pc 总结: 1.函数参数传递主要分为值传递和& ...

  9. nuxt项目npm install 或安装sass时报错

    初始化nuxt项目时,多人开发,同事提前安装的sass ,拉去代码初始化npm install 时提示gyp版本有问题.找了好多方法,最后还是将node.js版本降低了.原来是16.13.2降低为14 ...

  10. input button

    即使你在文本输入下方添加了按钮,它们也会在页面上彼此相邻. 这是因为 input 和 button 元素都是内联元素,它们不会出现在新的行上. <button type='submit'> ...