vue render中使用 class

àì夳堔傛蜴生んèń 2022-11-18 10:54 177阅读 0赞

#### 梦开始：初代代码如下： ####

// template
     { 
                title: "操作", 
                align: "center",
                render: (h:any, params:any) => { 
                    return h('div',[
                        h(
                            'span',{ 
                                class:{ 
                                    tableOperation: true,
                                    tableOperationDis: params.row.vaild === 0 ? true : false
                                }
                            }, "生效")
      }

// style
      .tableOperation { 
         cursor: pointer;
         color: rgb(117, 194, 245);
         margin-left: 3%;
     }
     .tableOperation:hover{ 
         color: rgb(231, 71, 71);;
     }
     .tableOperationDis { 
         display: none
     }

结果发现，span上已经有了`class="tableOperation"` 但是span并没有效果。  
原因大概就是在 style部分了

#### 梦醒了 ####

*  我把scoped去掉后发现，span就会有样式了
 *  所以最终的style是这样的，如下，即保留了scoped 又能生效

// style
    ::v-deep .tableOperation { 
        cursor: pointer;
        color: rgb(117, 194, 245);
        margin-left: 3%;
    }
    ::v-deep  .tableOperation:hover{ 
        color: rgb(231, 71, 71);;
    }
    ::v-deep .tableOperationDis { 
        display: none
    }

。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2ODYzOTk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ2ODYzOTk_size_16_color_FFFFFF_t_70]: /images/20221022/ad69b20486894a139ef7228b45ff7682.png

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue项目中Table设置 render 函数

statusList1: { 0: "", 1: "", 2: "药品服务费收入",

太过爱你忘了你带给我的痛/ 2022年12月30日 07:45/ 0 赞/ 144 阅读

相关 Vue 里怎样在 Render 中使用 $refs

背景： > 使用 element-ui 组件，发现el-popover组件有一个方法: doClose()；调用方法为：this. r e f s \[ n a m e

ゞ浴缸里的玫瑰/ 2022年12月03日 15:50/ 0 赞/ 134 阅读

相关 vue render中使用 class

梦开始：初代代码如下： // template { title: "操作", ali

àì夳堔傛蜴生んèń/ 2022年11月18日 10:54/ 0 赞/ 178 阅读

相关详解在vue项目中使用render函数

https://forum.vuejs.org/t/render-new-vue/16084/5 https://www.jb51.net/article/148712.ht

骑猪看日落/ 2022年11月04日 11:14/ 0 赞/ 125 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 312 阅读

相关来聊聊Vue中使用Render函数和JSX

Render函数 `render`函数是组件渲染的重要核心，它跟`template`模板开发一样，只不过这种形式开发，它(`render`)更接近底层，这样能让`Vue`

不念不忘少年蓝@/ 2022年10月13日 12:40/ 0 赞/ 276 阅读

相关 vue中样式-class

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

小咪咪/ 2022年02月21日 09:17/ 0 赞/ 205 阅读

相关 vue中的render函数介绍

简介：对于不了解slot的用法（参考：[大白话vue-slot的用法][vue-slot]）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对ren

逃离我推掉我的手/ 2022年01月27日 20:47/ 0 赞/ 223 阅读

相关 vue渲染render

一、宏观上展现了Vue整体流程： ![vue-render-1.jpg][] Vue推荐在绝大多数情况下使用`template`来创建你的HTML。然而在一些场景中，

朱雀/ 2022年01月06日 08:17/ 0 赞/ 259 阅读

相关 Vue的render函数

回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识，我们有必要重温一下Vue中

冷不防/ 2021年09月07日 06:21/ 0 赞/ 337 阅读