首页 > 其他分享 >vue+iview 表格行选中修改背景色

vue+iview 表格行选中修改背景色

时间:2022-12-08 10:45:24浏览次数:38  
标签:index vue 表格 changeColor 背景色 选中 row iview

<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>

 

标签:index,vue,表格,changeColor,背景色,选中,row,iview
From: https://www.cnblogs.com/QiangQiangDai/p/16965423.html

相关文章

  • Vue组件
    什么是组件组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签,Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的......
  • vue上传formdata格式数据(axioes)
    vue.js上传formData数据到后台(其他js类似) 调用方式还是通过post方式请求类型要设置一下config.headers["content-type"]="multipart/form-data"; 然后上传......
  • vue3中ref和reactive的区别
    ref和reactive都是用来定义响应式数据的。ref允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上.value在模板中使用ref对象时,假如ref位于顶层,就不需要使......
  • vue3 Cropperimage插件写入默认网络图片跨域解决办法----- 图片转换成base64
    最近项目中有一个裁切图片的需求,百度了一番最后选用cropperImage插件。由于项目中图片是存放在阿里云上,cropperImage插件在初始化默认图的时候会存在跨域问题,百度经验我选......
  • vue路由基础 (个人)
    首先要有一个路由的js文件import{createRouter,createWebHashHistory}from"vue-router";importappHomefrom'../views/Home.vue'importitemMusicfro......
  • Vue设计table中的身份证号加密显示
    为了保护用户隐私,需要对身份证号中间进行加密,且需要考虑末尾带有X的情况话不多少直接上代码,运用正则解决:<el-table-columnprop="idcard"label="身份证"width="180">......
  • Vue双向绑定
    什么是双向绑定数据Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,试图也就发生变化,当试图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓......
  • node.js : request to https://registry.npmjs.org/vue failed, reason: connect ETIM
     https://v2.vuejs.org/v2/guide/installation.htmlhttps://v3.router.vuejs.org/installation.htmlhttps://v3.cli.vuejs.org/https://v3.vuex.vuejs.org/installation.......
  • Vue2(笔记25) - 脚手架 - render函数
    render 函数从错误提示开始打开项目入口文件:main.jsimportVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=falsenewVue({render:h=>h(App),......
  • vue 路由重复点击,报错处理
    路由重复点击,控制台会弹出提醒//在VueRouter上配置路由跳转,在router中的index.js中加上以下代码,注意加在use之前constrouterPush=VueRouter.prototype.push;VueR......