Element Plus修改表格行和单元格样式详解

目录
  • 前言
  • 设置某一行的样式
  • 设置某一个单元格的样式
  • 表头样式修改(赠品)
  • 总结

前言

实习工作需要根据表格的状态字段来设置行的样式,记录一波。

先来一下基础配置。(Vue3)

<template>
  <el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="age" label="年龄" width="100" />
    <el-table-column prop="job" label="工作" />
  </el-table>
</template>

<script setup>
const tableData = [
  {
    name: "clz",
    age: 21,
    job: "Coder",
  },
  {
    name: "czh",
    age: 21,
    job: "Coder",
  },
  {
    name: "赤蓝紫",
    age: 21,
    job: "Coder",
  },
];
</script>

<style lang="less" scoped>
</style>

设置某一行的样式

主要是通过 row-style属性来实现。它是行的 style的回调方法,可以通过它来实现设置某一行的样式。

先让我们来体验一下它的参数都是些什么。

<el-table
  style="width: 400px"
  border
  :data="tableData"
  :row-style="rowState"
>
</el-table>
const rowState = (arg) => {
  console.log(arg)
}

可以发现,它是一个对象,一个属性是行的数据,一个是行号(从0开始),至于不只是打印3次,而是打印9次的原因还没发现,后面单元格的会打印18次,9个单元格打印18次。但是这个并不是本次的研究重点。

那么,我们怎样能设置样式呢?

只需要返回含有属性样式的对象即可。(驼峰命名法)

const rowState = (arg) => {
  return {
    backgroundColor: 'pink',
    color: '#fff'
  }
}

然后在搭配参数使用,就能实现根据表格内容设置行的样式。

const rowState = ({ row }) => {
  let style = {}

  switch (row.name) {
    case 'clz':
      style = {
        backgroundColor: 'red'
      }
      break;
    case 'czh':
      style = {
        backgroundColor: 'blue'
      }
      break;
    case '赤蓝紫':
      style = {
        backgroundColor: 'purple'
      }
      break;
  }
  return style;
}

设置某一个单元格的样式

通过 cell-style属性来实现。做法和上面一样,就不多说了,主要的四个参数 row, column, rowIndex, columnIndex

  • row:行的信息
  • column:列的信息
  • rowIndex: 行数(0开始算)
  • columnIndex:列数(0开始算)
<el-table
  style="width: 400px"
  border
  :data="tableData"
  :cell-style="cellStyle"
>
</el-table>
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 1 && columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

其实,cell-state不只是能设置单元格的样式,因为它的参数中含有 row和 column,所以还可以用来设置某一行或某一列的样式。

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.label === '工作') {
    return {
      backgroundColor: 'purple'
    }
  }

  if (row.name === '赤蓝紫') {
    return {
      backgroundColor: 'red'
    }
  }

}

注意,这里重叠的地方并不会出现后来的样式覆盖掉前面的样式,而是先到先得

表头样式修改(赠品)

特殊的表头,特殊的处理

header-row-style:只有一个rowIndex属性

const headerRowStyle = (args) => {
  console.log(args)
  return {
    height: '100px',
    backgroundColor: 'red'
  }
}

发现只有标头的行高有所变化,这是为啥呢?

检查样式发现,这是因为单元格本身具有背景颜色,所以并不会生效。

header-row-style:和正常的单元格一样,有四个属性

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

也可以通过column属性来设置符合条件的表头单元格的样式。

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
​
  if (column.label === '姓名') {
    return {
      backgroundColor: 'red'
    }
  }
}

总结

到此这篇关于Element Plus修改表格行和单元格样式的文章就介绍到这了,更多相关Element Plus修改单元格样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3.0之引入Element-plus ui样式的两种方法

    目录 第一种:CDN 第二种:通过 npm 安装,并希望配合 webpack 使用 安装:官网欢迎star:github npm install element-plus --save 第一种:CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/t

  • Element Plus修改表格行和单元格样式详解

    目录 前言 设置某一行的样式 设置某一个单元格的样式 表头样式修改(赠品) 总结 前言 实习工作需要根据表格的状态字段来设置行的样式,记录一波. 先来一下基础配置.(Vue3) <template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" wid

  • C#插入图片到Excel表格单元格代码详解

    dll文件获取及引用: 方法1:通过官网下载dll文件包,并解压.解压文件后,将bin文件夹下的Spire.Xls.dll文件引用到C#程序. 方法2:通过Nuget网站获取dll. C#代码示例 using Spire.Xls; using System.Drawing; namespace InsertImage_XLS { class Program { static void Main(string[] args) { //创建Workbook对象 Workbook workbook =

  • 浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

    如下所示: <script type="text/html" id="status"> {{# if(d.status === 1){ }} <span class="layui-badge layui-bg-green">正常</span> {{# } else { }} <span class="layui-badge">禁用</span> {{# } }} &l

  • 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法

    今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Excel中格式的设置,以及单元格的合并等等.下面就介绍下,使用NPOI类库操作Excel的方法. 1.首先我们先在内存中生成一个Excel文件,代码如下:   HSSFWorkbook book = new HSSFWorkbook();        ISheet sheet = book.CreateSheet("Sheet1"); 2.然后在新创建的sheet里面,创建我们的行和列,代码如下

  • element-ui 表格实现单元格可编辑的示例

    如下所示: <template> <el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column label="日期" width="180&q

  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

  • Layui数据表格之单元格编辑方式

    开发工具与关键技术:VS.layui数据表格之单元格编辑 layui是我们常用的一个插件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,其中有很多模快,而每个模板又包括很多模板,下面我要讲解的是数据表格中的单元格编辑. 1.在使用layui之前首先确保已经引入了layui的css和js脚本文件. 2.初始化layui模块. layui.use(['table'], function () { //声明一个layuiTable变量作为全局变量.

  • Swift实现表格视图单元格多选

    本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下 效果 前言 这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想着,一并把多选也做了,今天刚好有时间,去做这样一件事情.多选在我们的应用程序中也是常见的,比如消息的删除,群发联系人的选择,音乐的添加等等可能都会涉及到多选的需求,本文,我将模拟多选删除消息来讲讲多选的实现. 原理 多选删除其实很简单,并不复杂,我的思路就是创建一个数组,当用户选中某个单元格的时候,取到单元格上对应的数

  • 解决poi导出时单元格样式被覆盖问题

    目录 poi导出时单元格样式被覆盖 解决方法 poi的cellstyle陷阱,样式覆盖 问题 解决方法 poi导出时单元格样式被覆盖 在poi操作时对每个单元格进行样式设置,出现的问题是单元格样式被覆盖了? 如何解决这一问题???? 解决方法 这里使用到了CellStyle 的一个方法 void cloneStyleFrom(CellStyle var1); 创建一个不影响使用的cell 然后设置样式 在创建一个新的cell使用 createCellStylecopy.cloneStyleFro

  • C#实现改变DataGrid某一行和单元格颜色的方法

    本文所述实例主要实现WPF项目中C#改变DataGrid某一行和单元格颜色的功能.分享给大家供大家参考.具体方法如下: 如果要改变DataGrid某一行的颜色.高度,以及某个单元格的颜色.单元格字体的颜色,就必需取到datagrid的一行和一行的单元格,通过查找相关资料及测试总结出如下实例代码,现记录下来便于大家参考使用. 1.前台WPF界面添加一个DataGrid控件,并添加两列(便于编写,达到目的即可) <DataGrid AutoGenerateColumns="False"

随机推荐