Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解

缺乏耐心的读者请主要关注标红部分！

因部分内容自动转为代码格式，所以代码部分请主要关注注释部分！

1.Table表格组件内容自定义：

官网Table表格组件部分示例代码：

columns12: [{title: 'Name',slot: 'name'},{title: 'Age',key: 'age'},{title: 'Address',key: 'address'},{title: 'Action',slot: 'action',width: 150,align: 'center'}
],
data6: [{name: 'John Brown',age: 18,address: 'New York No. 1 Lake Park'},{name: 'Jim Green',age: 24,address: 'London No. 1 Lake Park'},{name: 'Joe Black',age: 30,address: 'Sydney No. 1 Lake Park'},{name: 'Jon Snow',age: 26,address: 'Ottawa No. 2 Lake Park'}
]

如果想对其中一列替换为图标或输入框等组件：

示例代码改写如下：

columns12: [{title: 'Name',slot: 'name'},{title: 'Age',key: 'age'},{title: 'Address',key: 'address',// 在Table的title定义中通过render定义Table的data渲染方式render: (h, params) => {// 可以通过console查看params数据详情// console.log(params)return h('div', [// 如果是多个子元素/DOM用[]包起来// 这里只演示显示图标，注意是iView的组件，所以定义是Iconh('Icon', {props: {// iView的Icon在HTML中的使用是<Icon type='ios-people'>...，所以要定义type属性和值type: params.row.address,//关联key: 'address'，最终获取的是Table的data中对应的address数据，如ios-people},style: {},on: {},})])}},{title: 'Action',slot: 'action',width: 150,align: 'center'}
],
// 演示数据，用于演示，不要纠结address为什么值是icon的值，
// data6标红，因为和案例2有关联
data6: [{name: 'John Brown',age: 18,address: 'ios-people'},{name: 'Jim Green',age: 24,address: 'ios-settings'},{name: 'Joe Black',age: 30,address: 'ios-people'},{name: 'Jon Snow',age: 26,address: 'ios-settings'}
]

效果截图：

2.Table组件中Modal组件内容自定义及render循环嵌套渲染：

官网Modal组件部分示例代码：

this.$Modal.info({title: 'User Info',content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
})

示例代码改写如下：

this.$Modal.info({title: '菜单信息详情',render: (h, params) => {// console.log(params)return h('Form', [/*** 官网Form表单组件示例代码：* <Form>* <FormItem prop="user">* <Input type="text" v-model="formInline.user" placeholder="Username">* <Icon type="ios-person-outline" slot="prepend"></Icon>* </Input>* </FormItem>* </Form>** Dom结构为Form>FormItem>Input>Icon，这里不考虑输入框，所以最终结构是Form>FormItem>Icon** Form已在上面定义，接下来是FormItem*/h('FormItem', {props: {label: '菜单图标',},style: {labelWidth: '100px',},on: {},},// 原本的content内容（见官网示例下方文档表格属性说明）直接替换如下，因为已经在render和return里了，就不要再写一遍render和return，直接写要渲染的组件就好了，同样如果多个用[]包起来[// 使用说明见示例1h('Icon', {props: {type: this.data6[index].address,// data6标红，因为和案例1有关联}}),]),]);}})

效果截图：

以上学习笔记，仅供参考，欢迎交流指正

参考：

https://www.iviewui.com/components/table

https://www.iviewui.com/components/modal

https://www.iviewui.com/components/form

https://www.cnblogs.com/weichen913/p/iview.html

Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解相关推荐

Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
如何用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
vue模态框组件拿不到dom元素
今天在写模态框的组件时,在一个页面引入了模态框组件.但是模态框设置初始是不显示的,然后我在模态框组件里面的mouted里面拿到dom元素,按理来说mouted都已经加载完元素了,但是我不管是通过doc ...
Android开发笔记(3) 应用程序之间内容分享详解
PS:改变文章标题只为更加详细说明功能和排版,以方便日后复习.这两篇文章已经写得很详细 Android 应用程序之间内容分享详解(一) 转载请注明地址:http://blog.csdn.net/xia ...
详细介绍React模态框组件react-modal
1,介绍该组件实现了模态框的一些效果. 这是react-modal官网的配置参数. 模态框的手动实现,并不算太难,这个组件用着还不错. 2,配置参数介绍 import React, { Compon ...
【Vue笔记】Vue生命周期函数详细图解
Vue生命周期函数详细图解如下:
vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据.找了网上的资料后发现js-xlsx可以实现. 首先安装依赖: $ npm install xlsx HTML部分: 引入: im ...
vue.js 与iview官网
vue.js https://cn.vuejs.org/v2/guide/instance.html#生命周期图示 iview https://www.iviewui.com/components/t ...

Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解

Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解相关推荐

最新文章

热门文章