iview通过点击事件设置单个单元格样式的方法

最新推荐文章于 2025-05-20 23:05:29 发布
最新推荐文章于 2025-05-20 23:05:29 发布
阅读量3.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端框架/类库的使用 文章标签： iview vue 动态添加对象属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Low_key_001/article/details/84025883
本文介绍在Vue中为表格单元格添加动态样式的正确方法。通过使用render函数获取单元格行列值，利用this.$set手动更新对象属性，实现单元格样式的动态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、首先用render函数获取所点击的单元格行列值

2、点击通过行列值给对应的数据添加属性cellClassName，并且根据class名改变样式

先展示一种错误写法（这种写法虽然可以添加属性值，但是vue不能识别触发自动更新）

正确写法

3、笔记：

1）给对象添加动态属性需要用obj[var] = 'test'的写法

2）this.$set(对象，键，值)手动更新

 

iview可编辑表格组件封装
Ningqiugu的博客
10-23 8738
因为公司需要尝试新的UI框架，因此自己也是学习了iview这个新的框架，之前一直都是用的element-ui，正好公司项目用到可编辑表格这样的组件，但是网上也是搜不到相关的资料，所以自己在参考了iview-admin的一些方法之后，自己写了一个，当然这个组件还是有一些缺陷后面会说到，本篇就是记录一下自己学习新的ui框架的一个过程。 首先自己希望的可编辑的表格是这样的一种形式。 就是这样的整行可以...
Vue Element UI el-table 显示样式重叠 (问题解决)
Bnana博客
04-09 6088
Vue Element UI el-table 显示样式重叠(问题解决) element ui 问题解决 element ui el-table 样式显示问题 element ui el-table 样式覆盖问题 element ui el-table 样式问题 element ui el-table 表格显示问题 element ui el-table 表格样式重叠 叠加 问题 element ui el-table 样式叠加显示问题 解决 Vue Element UI 问题 解决
iview table表格的自定义样式（动态改变背景色等）
tenggeer0789的博客
01-20 8505
iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行，当前行背景颜色更换为红色 斑马条纹 效果图 在这里插入图片描述 2.设计 iview的官方文档已经给出了解决方案 在这里插入图片描述 选中高亮=》highlight-row 斑马条纹=》stripe 表格自带浮动到某行变色 checkbox=》selection 在这里插...
iview table的render函数中如何设置元素的样式
fanyanjiang的博客
12-19 7223
在html5页面中，我们知道设置元素样式的方法有2种：一种是直接在元素标签中添加style属性并设置样式，另一种是给元素添加class属性然后给class属性设置样式。既然原生的html页面有这两种设置属性的方式，那么iview的render函数当然也可以这么给元素添加样式啦。 render函数添加样式的两种方法： 第一种方法：直接设置style属性 “操作”列的render函数如下代码： {...
workflow：高效的流式工作架构
最新发布
weixin_71694051的博客
05-20 2238
负载均衡 类似于fd通过%4取模的方式负载均衡给四个网络线程 ，当条件满足的时候把任务抛出给工作线程处理。
html表格数据点击事件,如何在iview的table单元格里实现点击事件？
weixin_39932692的博客
06-04 833
需求是这样的，我需要做一个表格，表头和内容全都是动态的。从服务器端获取到数据后，最后拼装成一个二维数组slotTableData，里面的内容是自 iview 2.3 支持的 html。这样就可以在界面上显示出二维数组了。现在突然多了个需求，要求每个单元格可以点击或者鼠标悬浮提示。iview 原生不支持单元格点击事件(有pull request但是半年没通过。开发时间不足也没时间换elementui...
iview table 自定义单元格背景色
不积跬步何以至千里
08-31 1809
效果图 首先iview 官网有对单元格样式做过讲解 单元格：通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。 1.初始化 tableColumns: [ { title: "客户", key: 'companyName' }, { title: "区域", key: 'region' }, { title: "操作系统", key: 'os' }, { ti
:cellClassName实现表单单元格添加 类名.
拥抱城市的你
05-17 5832
:cellClassName 官方 cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String 开发实例 html代码段 在el-table中添加:cell-class-name 创建事件函数名 ...
ivew表格添加单个单元格高亮
09-24
在iView表格组件中，如果你想为表格的单个单元格添加高亮效果，你可以使用`highlight-row`属性配合`cell-style`或`row-class-name`。这里有两个方法： 1. **使用`cell-style`**: 对于每个单元格，你可以定义一个...
vue可填写表格_17.Vue技术栈开发实战-可编辑表格的实现
weixin_39621695的博客
12-19 833
通过对iview的table表格的封装，实现如何自定义表格的内容。实现一个可编辑的表格。为了节省时间，首先已经做了一些准备首先是已经创建了table页然后写了一个api，用来获取表格数据。然后在mock里面也进行了处理。返回了数据的响应tools里面封装了一个方法doCustomTImestimes是循环的次数，callback是回调函数。执行循环5次，根据template生成5条数据记录。最后在...
vue笔记总结
qq_44417271的博客
02-01 1649
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
iView中table表格组件使用中的一些问题解决方法
qq_41590119的博客
07-13 2539
最近在做图层属性信息展示功能时，需要用到表格来展示请求到的属性信息，项目UI时iview，所以我就从iview中拿到表格组件来用。https://iviewui.com/components/table 最终成品是这样一个组件。 iview的组件功能还是很强，但是用起来也相当麻烦，在这个表格设计过程中我遇到了两个难点； 一、怎么拆分以及合并部分单元格； 二、怎么调整某一个单元格的设计宽度； 首先第一个问题， viewUI里面提供了属性span-method可以指定合并行或列的算法。 该..
iview的表格自定义_iview table组件自定义表格背景色
weixin_39650139的博客
12-19 570
table用来展示表格数据很方便，当我们想要将某一行或者某一列或者是某一格的背景色改变，下面是官方的方法行：通过属性row-class-name可以给某一行指定一个样式名称。列：通过给列 columns 设置字段className可以给某一列指定一个样式。单元格：通过给数据 data 设置字段cellClassName可以给任意一个单元格指定样式行和列的设置比较简单，可以直接设置，官方...
Vue+iview表格如何给单个单元格设置样式
彳亍的博客
09-26 3760
官方文档地址：https://www.iviewui.com/components/table#TDYS，单元格：通过给数据 data 设置字段cellClassName可以给任意一个单元格指定样式。 但是如果你使用了插槽的话，你设置 的样式就不会生效。可以使用render函数代替插槽，这样设置单个单元格的样式才能生效 ...
iview table表格的自定义样式
热门推荐
玩大神的优快云的博客
10-17 2万+
iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行，当前行背景颜色更换为红色 斑马条纹 效果图 2.设计 iview的官方文档已经给出了解决方案 选中高亮=》highlight-row 斑马条纹=》stripe 表格自带浮动到某行变色 checkbox=》selection <Table ref="...
iview+page封装+强制刷新
浩星
09-26 1059
前言： iview的page封装，缺点无法固定页码按钮数量，而且current的页面恢复选中第一个实现不了，这里动态写了强制刷新的方法 下面是组件cpage.vue <template> <Page v-if="showPage" :class-name='className' :total="tota...
iView--color色彩
的博客
02-22 1701
1、hover事件： 指一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了...
dataframe 如何选中某列的一行_如何实现表格中鼠标划过一行整行变色，点击一行选中一行？...
weixin_39628063的博客
11-29 314
（记得先引入js文件哦）1.首先我们需要一个简单的表格。下面是我的表格。注：有些表格默认没有边框，所以需要自己手动设置。（下面是我手动添加的样式表，放在style标签内）2.这里是关键的部分，实现鼠标点击某一行后，将该行标为高亮。注：这里的select是一个自己写的一个样式。tr:hover{}是为鼠标划过的某一行增加一个效果。(!impartant是提高该样式的优先级，否则hover的颜色就会盖...
iview表格（table）组件划过时选中的颜色修改
Kino的博客
07-27 691
.ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td{ backgro.
iview table 单元格属性设置
04-10
在iView Table中，可以通过设置单元格属性来实现不同的功能和样式。 1. 单元格内容：可以通过设置`slot-scope`属性来自定义单元格的内容，使用`<template>`标签包裹需要显示的内容，并通过作用域插槽获取当前行的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值