iview 给render函数创建的标签添加属性，样式，点击事件，文本信息，自定义指，插槽

南^思

已于 2022-05-18 12:00:56 修改

阅读量3.9k

点赞数

分类专栏： vue 文章标签：前端 vue.js elementui

于 2022-03-31 17:39:55 首次发布

本文链接：https://blog.csdn.net/qwyio/article/details/123878196

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Vue.js中利用render函数和ElementUI的<el-button>组件来添加属性、样式、事件监听器以及自定义指令。通过示例代码，展示了如何设置按钮的类型、样式、点击事件，并实现了一个简单的点击弹窗功能。此外，还提及了该方法在element-table表格组件中的应用，展示了如何进行表格数据的自定义渲染。

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

渲染出一个标签，要怎么去添加这个标签的属性，样式，点击事件，以及文本信息？下面用一个element ui 组件的<el-button>按钮做一个简单的示例。

介绍：

attrs domProps 两者都可以去添加该元素的属性。下面的attrs也可以换成domProps，效果都是一样的。

用法：

render: (h, params) => {
    return h("div", [
        h("el-button", {
            // 普通的 HTML attribute
            attrs: {
                type: "primary",
             },
             // 与 `v-bind:class` 的 API 相同，
             // 接受一个字符串、对象或字符串和对象组成的数组
             class: {
                 resetColor: true,
             },
             // 与 `v-bind:style` 的 API 相同，
             // 接受一个字符串、对象，或对象组成的数组
             style: {
                 padding: "10px",
             },
             on: {
                 click: () => {
                    alert("我是点击事件");
                 },
              },
              // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
              // 赋值，因为 Vue 已经自动为你进行了同步。
              directives: [
                {
                  name: 'permission', // 指令名称 例如 v-permission
                  value: '2',
                  expression: '1 + 1',
                  arg: 'foo',
                  modifiers: {
                    bar: true
                  }
                }
              ],
              // 如果组件是其它组件的子组件，需为插槽指定名称
              slot: 'name-of-slot',
          },"我是button按钮"),
    ]);
},

这段代码不仅可以在iview组件使用，经过封装，也可以在element table表格里去渲染出表格数据。链接：element ui table 表格二次封装——支持自定义列，render渲染表格数据，支持单选。_qwyio的博客-CSDN博客_element 表格二次封装