Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

作者:神秘网友 发布时间:2020-10-24 01:23:32

Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

先在Table 表格 上加 上属性

<el-table :data="tableList" border :cell-style="columnStyle">
          <el-table-column type="index" label="第一列" width="50px"></el-table-column>
          <el-table-column type="index" label="第二列" width="50px"></el-table-column>
          <el-table-column type="index" label="第三列" width="50px"></el-table-column>
          <el-table-column type="index" label="第四列" width="50px"></el-table-column>
 </el-table>

在 methods:中上方法

//row,  每一行上的数据
//column, 每一列上的数据
//rowIndex,  行数的下标从0开始
//columnIndex   列数下标从0开始
  methods: {
	    columnStyle({ row, column, rowIndex, columnIndex }) {
	          if (columnIndex == 2 || columnIndex == 3 || columnIndex == 4) {
		        //第二三第四列的背景色就改变了2和3都是列数的下标
		        if (columnIndex == 3 || columnIndex == 4) {
		          //字体颜色
		          return "background:#e6cc6f;color:blue;cursor: pointer";
		        }
		        return "background:#e6cc6f";
		      }

	   	 },
   }

展示：改变了列的背景色
Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色
原文链接：https://blog.csdn.net/qq_44757978/article/details/103453236

Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色相关教程

  1. Vue通过eventBut实现组件全局通信

    Vue通过eventBut实现组件全局通信 一、组件之间的层级关系如下图： 现要在test_page_1.vue 组件中改变，MyHeader.vue组件中的某个属性值。 二、eventBus简介： EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用

  2. 一天入门Tableau详细教程（上）

    一天入门Tableau详细教程（上） 作者：Roar 来源：知乎专栏|https://zhuanlan.zhihu.com/p/71502618 看到标题，可能有的同学会说不是可以敲代码得到相应的可视化图形的吗？为什么还要用Tableau这种专业的数据分析软件呢？ 那么我觉得得先认识一下什么是Tablea

  3. RxJS结合vue-rx， Akita的介绍和使用

    RxJS结合vue-rx， Akita的介绍和使用 介绍 ： 解决异步事件。它将一切数据包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后利用强大丰富的操作符（Operators ）对流进行处理，使得用户可以用同步编程的方式处理异步数据。 基本概念 ：Observable 类

  4. vue Element 利用Cascader 级联选择器实现三层选择器

    vue Element 利用Cascader 级联选择器实现三层选择器 在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。 效

  5. nginx部署多个vue项目如何配置

    nginx部署多个vue项目如何配置 使用同一域名或者ip去部署访问多个前端项目，比如域名/ip直接访问官网，域名/ip后面带路径去访问其它项目 官网访问地址: http://192.168.27.119/login项目二访问地址：http://192.168.27.119/biz/login项目三访问地址：http://1

  6. 在 vue 中使用 echarts 的详细步骤

    在 vue 中使用 echarts 的详细步骤 年龄大了，果然脑力是跟不上了，这个图表已经用过几次了，每次还是或多或少的出现问题，现在把 echarts 在 vue 中的详细使用步骤记录下来，以备不时之需吧。 echarts 图表绘制的思路是： 1 获取一个有宽高的 DOM 元素 -- 2

  7. Jenkins + Maven + Github/Gitlab + Springboot/Vue.js 实现自动

    Jenkins + Maven + Github/Gitlab + Springboot/Vue.js 实现自动化部署 Jenkins用户文档地址 Jenkins在docker环境下安装非常简单。只需要执行命令 docker run \ -u root \ --rm \ -d \ -p 8080:8080 \ -p 50000:50000 \ -v jenkins-data:/var/jenkins_home \

  8. VuePress 侧边栏使用详解

    VuePress 侧边栏使用详解 前言 官网写的侧边栏教程真的是让人很糟心，经过一番摸索，总算大致弄清楚了，下面详细说一下用法： 目录结构： docs根目录下有一个README.md、chinese文件夹、english文件夹 最简侧边栏： sidebar: { '/language/chinese/': [ '', /