10
2019
10

Vue的高级函数组件,如何使用render函数渲染组件

这里通过一个完整的例子对render函数的用法和注意事项进行说明:

运行效果:屏幕快照 2019-10-10 上午10.31.48.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>functional</title>
    <link rel="stylesheet" type="text/css" href="css/iview.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/mock.js"></script>

    <style>
        .container {
            width: 500px;
            margin: 100px auto;
        }

        .container table {
            width: 100%;
            border: 1px solid #ccc;
        }

        .container table th {
            background: #ccc;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .container table td {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 5px;
            font-size: 13px;
        }

        .container table td:nth-child(1) {
            border-left: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <mytable :columns="cols" :data="datas"></mytable>
        </div>
    </div>
    <script>
        //高级函数组件
        Vue.component('myrender', {
            functional: true,
            props: {
                render: Function,
                column: Object,
                index: Number
            },
            render(h, ctx) {
                const params = {
                    row: ctx.props.column,
                    index: ctx.props.index
                }
                return ctx.props.render(h, params, ctx.children)
            },
        })
        //自定义组件 
        Vue.component('mytable', {
            props: {
                columns: {
                    type: Array,
                    required: true
                },
                data: {
                    type: Array,
                    required: true
                },
            },
            template: `
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <th v-for="c in columns">{{ c.title }} </th>
                </tr>
                <tr v-for="(item,index) in data" :key="index">
                    <td v-for="cc in columns">
                        <myrender v-if="cc.render" :index="index" :render="cc.render" :column="item"></myrender>
                        <template v-else>
                            {{ item[cc.key] }}
                        </template>
                    </td>
                </tr>
            </table>
            `
        })
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    cols: [{
                        title: '姓名',
                        key: 'name'
                    }, {
                        title: '年龄',
                        key: 'age'
                    }, {
                        title: '地址',
                        key: 'address'
                    }, {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            //参考:https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, /*params.row.age*/ '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }],
                    datas: [{
                            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'
                        }
                    ]
                }
            },
            methods: {
                show(index) {
                    this.$Modal.info({
                        title: 'User Info',
                        content: `Name:${this.datas[index].name}<br>Age:${this.datas[index].age}<br>Address:${this.datas[index].address}`
                    })
                },
                remove(index) {
                    this.datas.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>


上一篇:SQLAlchemy 之 SQL 表达式语言指南(下) 下一篇:Vue+iview+axios+webpack+vue-router建议自己后台管理系统