当前位置: 代码迷 >> 综合 >> iview 给render函数创建的标签添加属性,样式,点击事件,文本信息,自定义指,插槽
  详细解决方案

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

热度:56   发布时间:2023-12-15 09:15:30.0

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

介绍:

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

用法:

render: (h, params) => {return h("div", [h("el-button", {// 普通的 HTML attributeattrs: {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-permissionvalue: '2',expression: '1 + 1',arg: 'foo',modifiers: {bar: true}}],// 如果组件是其它组件的子组件,需为插槽指定名称slot: 'name-of-slot',},"我是button按钮"),]);
},

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

  相关解决方案