vue render中使用 class

àì夳堔傛蜴生んèń 2022-11-18 10:54 257阅读 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 条评论，257人围观）

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

相关阅读

相关 vue render函数怎样使用

一般来说，vue提供了template，让我们写页面的时候非常方便 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

痛定思痛。/ 2023年06月16日 10:41/ 0 赞/ 29 阅读

相关 Vue render 函数中使用this

1.在render中直接使用this,on里面click函数不是箭头函数使用this需要在父级将this保存起来才能使用 render: (h, params)

亦凉/ 2023年06月08日 04:58/ 0 赞/ 21 阅读

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

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

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

相关 vue render中使用 class

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

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

相关详解在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 赞/ 209 阅读

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

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

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

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

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

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

相关 Vue中的Class Component使用指南

![5e81513602a370aa08c19bb124c0f716.png][] 作者 | CherishTheYouth 来源 | https://www.cnblo

谁借莪１个温暖的怀抱￠/ 2022年09月02日 14:45/ 0 赞/ 20 阅读

相关 vue中的render函数介绍

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

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

相关 vue渲染render

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

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