VUE2-render-content

最新推荐文章于 2023-01-29 10:54:17 发布
最新推荐文章于 2023-01-29 10:54:17 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： 随笔 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lg8883573/article/details/120956419
版权

因为用到了VUE2 场景中需要对el-tree的渲染进行重写，其实也就是加上些icon,那么在el-tree中提供了render-content方法，但值得注意的是，重写的时候用到的是jsx语法，具体jsx语法也没有去过多研究，主要解决了一个问题，在绑定点击事件的时候需要如下写法：

nativeOnClick={() => this.downloadFile(data.url)}

最终实现了如下效果：

 

 

 

 

 

LongJ_Sir
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-tree的renderContent方法
qq_33911541的博客
08-25 2207
el-tree的renderContent方法
Vue的Render函数
garyhu1的博客
04-21 6385
基础 Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 h1> a name="hello-world" href="#hello-world"> Hello world! a>h1>
vue项目el-tree 懒加载实现增加、修改、删除及刷新当前子节点，render-content自定义样式
m0_38105640的博客
10-15 1万+
element-ui 中设计层级和动态加载节点的组件el-tree，对于前端来说，用的比较多，否则对于vue项目，要自己写render操作dom。当操作的树形结构层级比较多时，多用懒加载。例如实现如下功能，就是用el-tree实现的。 实现这个功能有几个问题 要解决： 1.改样式。官网提供的样式不能够满足开发的需要，尤其是对tree进行增删改的时候。所以需要用到render-content自定义样式。 2.加载问题。懒加载，如何插入数据。 3.增删改之后刷新问题。 前两个问题很好解决，最后一个
element tree 自定义图标 自定义组件
笔记库
08-20 4944
以下内容来自element官方文档： 可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持...
vue+element：current-node-key和setCurrentKey设置默认选中并高亮节点，附带全部展开，全部关闭，重新渲染树结构函数render-content
热门推荐
Crazy_GirlLL的博客
02-25 2万+
根据接口获取树结构后，设置默认选中的节点，并高亮 效果图： 官网中对于这两个节点的解释如下 代码如下 <el-tree v-loading="loading" :data="treeData" node-key="value" :props="defaultProps" default-expand-all
React监听键盘事件
刘洪瑞的博客
09-08 1473
import React, { Component } from "react"; import { withRouter } from 'react-router-dom' import "./index.scss"; class Header extends Component { constructor(props) { super(props); this.state = { inputValue: "", }; } onChange=(e)=&g
UEFI 基础教程 （二）：UEFI工程模块文件
weixin_41028621的博客
01-13 2622
1.概述   介绍EDK2的两个概念模块(Module)和包(Package)。 “包”是一组模块及平台描述文件(.dsc文件)、包声明文件(.dec文件)组成的集合，多在以*pkg命名的文件夹中，一般也称这样的文件夹为一个包。 模块是UEFI系统的一个特色。模块(可执行文件，即.efi文件)像插件一样可以动态地加载到UEFI内核中。对应到源文件，EDK2中的每个工程模块由元数据文件(.inf)和源文件(有些情况也可以包含.efi文件)组成。   主要介绍3种应用程序模块、UEFI驱动模块和库模
vue-router路由简单案例介绍
12-02
<div class='page index-content'> <router-view class="view" keep-alive transition="slide"></router-view> <Footers></Footers> ``` 在 `app.vue` 的 `<script>` 部分，我们看到使用了 ES6 模块系统，`...
vue-router + vue-loader
02-07
2. **Vue-Loader**: Vue-Loader是Webpack的加载器，专门处理`.vue`文件。它将`.vue`文件拆分成三个部分：模板、样式和脚本，然后分别用不同的加载器处理。例如，`Login.vue`和`Index.vue`文件中可能包含以下结构： ...
基于vue-cli脚手架整合echarts5创建的水球图案例
07-19
render: h => h(App), }).$mount('#app') ``` 接下来，我们要实现水球图。水球图（liquidFill）是ECharts5中的一个特殊图表，适用于展示液体填充的进度或状态。在你的组件（例如`src/components/MyLiquidFillChart...
vue-cli3配置多页面demo
12-12
Vue CLI 3 是 Vue.js 官方提供的一个强大的脚手架工具，用于快速搭建 Vue 应用。在创建单页应用（SPA）之外，Vue CLI 3 也支持配置多页面应用程序（MPA），这对于需要多个独立入口点的项目非常有用，比如不同的路由...
UNPKG element-ui CDN 引用资源 vue
06-06
在现代Web开发中，CDN(Content Delivery Network)是一种广泛使用的工具，它能够加速静态资源的加载，提高用户体验。UNPKG就是这样一个全球化的CDN服务，专门为开发者提供快速、免费的开源软件包分发。在本案例中，...
nuxt-render-on-scroll:VueNuxt组件，仅当组件滚动到视口时才允许您延迟渲染
05-19
滚动滚动渲染nuxt-render-on-scroll -Vue / Nuxt组件，仅当组件滚动到视口时，才可以延迟渲染组件。 基于的想法并在Nuxt.js中用于SSR：只要组件不在当前视口中或在... } ,}简单用法 < render> < div> This content w
Vue render深入开发讲解
12-10
然而，对于某些特定场景，如动态生成元素或需要更高级的逻辑，Vue 提供了一个名为 `render` 函数的选项，它允许开发者使用 JavaScript 直接生成虚拟 DOM（VNode）。 在描述中提到的例子中，我们有一个组件 `...
Vue自定义render统一项目组弹框功能
10-15
本文将详细介绍如何利用Vue自定义render实现项目组内的统一弹框功能。 首先，我们要理解为什么需要对弹框进行统一封装。传统的弹框实现可能涉及多个组件的创建，例如一个`normalDialog.vue`用于包裹`dialogBody.vue...
如何用Stata完成（shui）一篇经济学论文（三）：基本命令
Hedy_mail的博客
09-13 1万+
目录变量的生成变量的删除变量的更改 变量的生成 要生成一个新变量，我们就用gen（或者g），很明显就是generate的意思，gen（或g）后跟要生成新变量的名字（注意名字不能以数字开头），然后跟新变量生成的等价条件（可以加判断条件之类的，我们后面再讲），如果后面没有跟其他等价条件，则生成一个变量，变量里没有值。生成一个常量值，像我们之前举过的例子： gen x1 = 0 生成一个变量x1，x1的值为0。 生成一个变量，值等于另外一个变量的值，如: gen x2 = hour 这里我们生成了一个变量x2
vue Render函数的使用方法
贤和知识点收藏
11-06 4046
Render函数是vue2.x新增的一个函数、主要用来提升节点的性能，它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom。 前期在使用iview和element树形控件时，想要在节点的前面加上光标、后面加上编辑按钮，找遍所有的API都没有找到对应设置方法，只看到了rendoerContent函数，发现此函数可以使用想要功能，ren...
[TypeScript]Vue/React子组件实例暴露方法
ZhuAiQuan的博客
11-15 3362
必知必会之Vue/React组件通信 其一； 你可以不会，但你一定要了解怎么用。
基于vue2、element-ui封装的table组件。简单的render使用(可参考element中Transfer的render-content)
weixin_42219561的博客
01-29 602
基于element-ui二次封装的表格。
el-tree render-content
最新发布
03-16
el-tree render-content是一个Vue组件库中的一个组件，用于渲染树形结构的内容。它可以根据传入的数据自动生成树形结构，并且支持自定义节点的样式和内容。在使用el-tree render-content时，需要先安装Vue组件库，并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值