缺乏耐心的读者请主要关注标红部分！
因部分内容自动转为代码格式，所以代码部分请主要关注注释部分！
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的组件，所以定义是Icon
h('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，直接写要渲染的组件就好了，同样如果多个用[]包起来
[
// 使用说明见示例1
h('Icon', {
props: {
type: this.data6[index].address,// data6标红，因为和案例1有关联
}
}),
]),
]);
}
})效果截图：
以上学习笔记，仅供参考，欢迎交流指正
参考：
https://www.iviewui.com/components/table
https://www.iviewui.com/components/modal
