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

最新推荐文章于 2021-08-31 16:37:55 发布
最新推荐文章于 2021-08-31 16:37:55 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： 前端框架/类库的使用 文章标签： iview vue 动态添加对象属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Low_key_001/article/details/84025883
版权

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

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

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

正确写法

3、笔记：

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

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

 

程序猿三问
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview的表格自定义_iview table组件自定义表格背景色
weixin_39650139的博客
12-19 477
table用来展示表格数据很方便，当我们想要将某一行或者某一列或者是某一格的背景色改变，下面是官方的方法行：通过属性row-class-name可以给某一行指定一个样式名称。列：通过给列 columns 设置字段className可以给某一列指定一个样式。单元格：通过给数据 data 设置字段cellClassName可以给任意一个单元格指定样式行和列的设置比较简单，可以直接设置，官方...
iview table的render函数中如何设置元素的样式
fanyanjiang的博客
12-19 6856
在html5页面中，我们知道设置元素样式的方法有2种：一种是直接在元素标签中添加style属性并设置样式，另一种是给元素添加class属性然后给class属性设置样式。既然原生的html页面有这两种设置属性的方式，那么iview的render函数当然也可以这么给元素添加样式啦。 render函数添加样式的两种方法： 第一种方法：直接设置style属性 “操作”列的render函数如下代码： {...
html表格数据点击事件,如何在iview的table单元格里实现点击事件？
weixin_39932692的博客
06-04 734
需求是这样的，我需要做一个表格，表头和内容全都是动态的。从服务器端获取到数据后，最后拼装成一个二维数组slotTableData，里面的内容是自 iview 2.3 支持的 html。这样就可以在界面上显示出二维数组了。现在突然多了个需求，要求每个单元格可以点击或者鼠标悬浮提示。iview 原生不支持单元格点击事件(有pull request但是半年没通过。开发时间不足也没时间换elementui...
iview table 自定义单元格背景色
不积跬步何以至千里
08-31 1597
效果图 首先iview 官网有对单元格样式做过讲解 单元格：通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。 1.初始化 tableColumns: [ { title: "客户", key: 'companyName' }, { title: "区域", key: 'region' }, { title: "操作系统", key: 'os' }, { ti
:cellClassName实现表单单元格添加 类名.
拥抱城市的你
05-17 5266
:cellClassName 官方 cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String 开发实例 html代码段 在el-table中添加:cell-class-name 创建事件函数名 ...
iView中table表格组件使用中的一些问题解决方法
qq_41590119的博客
07-13 2338
最近在做图层属性信息展示功能时，需要用到表格来展示请求到的属性信息，项目UI时iview，所以我就从iview中拿到表格组件来用。https://iviewui.com/components/table 最终成品是这样一个组件。 iview的组件功能还是很强，但是用起来也相当麻烦，在这个表格设计过程中我遇到了两个难点； 一、怎么拆分以及合并部分单元格； 二、怎么调整某一个单元格的设计宽度； 首先第一个问题， viewUI里面提供了属性span-method可以指定合并行或列的算法。 该..
iview table高度动态设置方法
08-27
iview Table 高度动态设置方法 iView 是一个基于 Vue.js 的组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，iView Table 是一个非常常用的组件，用于显示表格数据。然而，在使用 iView Table ...
iview给radio按钮组件加点击事件的实例
12-29
如下所示： 商家电话 负责人电话 ()>输入新的电话</Radio></span> iview的单选按钮如果想要加点击事件，加在 RadioGroup 上和 Radio 上都不生效，这时，可以给组件外
iview中Select 选择器多选校验方法
08-27
iView 中 Select 选择器多选校验方法可以通过设置 `multiple` 属性和定义验证规则来实现。我们可以使用 `type` 属性来指定验证规则，并使用 `len` 属性来规定数组的长度。同时，我们也可以使用正则表达式来验证用户...
iview 或 element-ui table 列表表头加样式
weixin_30666401的博客
04-15 298
table 表头有时候需要加一些小样式比如 必填项 这是我项目中遇到的需求=== 比例，产品， 部门为必填项，这个时候就需要在表头加个红色小星星。 首先在table中绑定:header-cell-class-name="must"事件 然后methods中写must事件如下 must(obj) { if (obj.columnIndex === 1 || obj.colu...
iView组件表单render应用
没时间
06-04 495
实现： 1.表单字体颜色，下划线，居中 2.内部可以实现js代码的实现 代码： { align: "center", title: "地区", children: [ { align: "center", title: "市", key: "CITY", width:120, rende
iView表格（table）渲染（render)
猿飞梦的博客
04-22 4953
零、render 1、语法 以下分别定义了：标签名称，（样式，事件等综合内容），显示内容 render: (h, params) => { return h('span', { style: { color: '#FF7D41' }, on:...
iview中的内置样式如何更改，iview中怎么使用框架中的类名类修改样式
weixin_39818813的博客
10-09 1万+
这个问题真是困扰了这么久了。之前一直没查出来怎么去改，一直是通过行内样式来修改。 问题： 当一个元素封装了很多层时，我们无法找到里面封装的那个标签，所以无法要通过行内样式去修改。 解决： 方法一：直接重置样式 ---最简单的办法 直接重置样式 比如我们要修改iview中的封装的ivu-layout-header这个class类对应的样式 先在浏览器找到影响样式的类名： iv...
iview表格单独一行添加样式
xy19950125的博客
11-19 3568
1 给Table添加属性 &lt;div&gt; &lt;Table ：row-class-name border highlight-row :columns="columns1" :data="data1"&gt;&lt;/Table&gt; &lt;/div&gt; 2 在methods里面添加函数 rowClassName (row, index) { if (in...
iview table表格的自定义样式
热门推荐
玩大神的CSDN的博客
10-17 2万+
iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行，当前行背景颜色更换为红色 斑马条纹 效果图 2.设计 iview的官方文档已经给出了解决方案 选中高亮=》highlight-row 斑马条纹=》stripe 表格自带浮动到某行变色 checkbox=》selection &lt;Table ref="...
vue中使用element-UI样式row-class-name失效原因(好使)
HuangZeJunXXX的博客
08-26 5571
问题描述 vue项目中，需要给vue表格中的每一行加入自定义的样式，根据文档给组件加上row-class-name属性即可，直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。 解决方案 1.使用全局属性 在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组...
单元格点击事件cell-click
lily1324193的博客
11-28 1万+
一定要将@cell-click="show"这玩意儿写在标签上，不能写在列的标签内，一般思维是点击哪行就把事件写在哪儿，这货不是，折腾一小时！ <el-table :data=“tableData” border style=“width: 100%” @cell-click=“showPTable2”> ...
iview table点击单元格事件
Bambi12的博客
08-13 5901
点击事件 on: { click: () => { this.handleShow(params.row) //点击事件 } } title设置 domProps: { title: params.row.noticeTitle //添加title属性 }, 过长部分截...
iview table高度动态设置
诗雨远方的博客
12-30 2万+
iview table高度动态设置     在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（test）时候发现在别的终端如1368*768的机器上都显示不全，下面就把我的和其他机器上效果图做个对比，如图所示： 一、我的机器 二、别人的机器 三、解决办法
iview table 单元格属性设置
最新发布
04-10
在iView Table中，可以通过设置单元格属性来实现不同的功能和样式。 1. 单元格内容：可以通过设置`slot-scope`属性来自定义单元格的内容，使用`<template>`标签包裹需要显示的内容，并通过作用域插槽获取当前行的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值