Vue使用render函数渲染组件详解(使用iView渲染表头筛选为例)

最新推荐文章于 2024-08-15 16:42:09 发布

mrgaoblog

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量7.1k

点赞数 2

分类专栏： Vue 文章标签： Vue iview render函数渲染表头筛选

本文链接：https://blog.csdn.net/qq_32400821/article/details/89222141

版权

本文介绍如何使用Vue的render函数配合iView，实现表格组件的表头筛选功能。通过讲解Render函数参数及示例，展示在表头添加可搜索筛选的实现过程。

摘要由CSDN通过智能技术生成

此文源码案例:欢迎Star

一、Render 函数参数详解
二、样例：如何给表格组件添加表头筛选

Vue 组件的开发有几种方式：单文件组件，使用 render 函数渲染，使用 template。

在大多数的情况下，Vue 可以使用单文件/template 的方式来创建页面；然而在有一些情况我们需要使用 JavaScript 的编程能力，比如使用第三方框架时，想要自定义某个功能；这个时候就可以使用到 render 函数。

本文将使用 iView table 为例，通过 render 函数添加可搜索的表头筛选。

一、Render 函数参数详解

//一个简单的例子：渲染一个p标签，内容为 '我是p标签的内容'
new Vue({
   
  render: createElement => createElement("p", "我是p标签的内容")
});

其实 createElement()还有更强大的参数:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  "div",

  // {Object}
  // 一个包含模板相关属性的数据对象,
  // 你可以在 template 中使用这些特性。可选参数。
  {
   
    // (详情见下一节)
  },

  // {String | Array}
  // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    "先写一些文字",
    createElement("h1", "一则头条"),
    createElement(MyComponent, {
   
      props: {
   
        someProp: "foobar"
      }
    })
  ]
);

createElement(obj,{},[])

参数详解:

第一个参数为渲染成哪个节点，接受 String,Object,Function 三种类型；
- 如果是 String,比如是 div，那么表示此标签将会渲染成 div 标签；String 渲染成普通的 html 标签
- 如果是 Object，比如是一个 Vue 的组件:TableFilter，那么表示此标签将会渲染一个组件。通常我们在单文件组件中使用的时候是 import {Table} from “iview”;然后在 template 中引用此标签；而使用 render 则需要使用 createElement 方式创建一个。
- 如果是 Function，则可以根据自己的业务逻辑动态觉得是渲染成普通的 html 标签还是 Vue 组件。

第二个参数接受一个对象{}类型的数据。其主要作用类似于组件中对某一个节点设置各种 bind 属性：设置样式 style，设置事件 on，设置类 class，设置自定义的命令，设置普通的 html 属性，设置传递参数 props 等等。

有一点要注意：正如在模板语法中，v-bind:class 和 v-bind:style，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。

{
   
  // 和`v-bind:class`一样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
   
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
   
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
   
    id: 'foo'
  },
  // 组件 props
  props: {
   
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
   
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`，当子组件使用$emit()方式发生，使用on接收
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
   
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: