缺乏耐心的读者请主要关注标红部分！
因部分内容自动转为代码格式，所以代码部分请主要关注注释部分！
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有关联}}),]),]);}})
效果截图：
以上学习笔记，仅供参考，欢迎交流指正
参考：
/components/table
/components/modal
/components/form
/weichen913/p/iview.html
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
