vue render函数的理解

官网上那个例子第一次看是有点懵的 点击打开链接

然后看table组件，自己慢慢明白了点，需求是这样的，表格里面的东西，自己定制化的东西多，比如链接可能是需要自己拼接一个URl地址,如下图

里面是什么都不一定，那么写组件的时候，不可能把所有情况都考虑到，需要去封装

抽离一个专门用来填充的

use([], function () {
    Vue.component('Cell', {
        pageName: "common",
        template: "<div></div>",
        props: {
            render: Function,
            column: Object,
            index: Number
        },
        data: function () {
            return {}
        },
        render: function (h) {
            var params = {
                column: this.column,
                index: this.index
            };
            return this.render(h, params);
        },
        methods: {}
    });
});

table中 

<Cell :render="col.render" :index="index" :column="item"></Cell>

定义data的时候（看运单号）

columns: [
    {
        type: 'index',
        width: 80,
        title: '序号',
        align: 'center'
    },
    {
        type: 'checkbox',
        title: '单号',
        key: 'No',
        align: 'center'
    },
    {
        title: '运单号',
        key: 'wayNo',
        sortable: true,
        render: function (h, params) {  
            return h('div', {}, [
                h('a', {
                    class: ['w-table-link'],
                    attrs: {
                        href: 'https://www.baidu.com/?wd=' + params.column.wayNo,
                        target: '_blank'
                    },
                    on: {
                        click: function (e) {
                            // e.preventDefault();
                            // e.stopPropagation();
                        }
                    }
                }, params.column.wayNo)
            ]);
        }
    },
    {
        title: '客户单号',
        key: 'cusNo',
        sortable: true
    },
    {
        title: '产品',
        key: 'product'
    },
    {
        title: '收件人',
        key: 'recPerson'
    },
    {
        title: '收件地',
        key: 'recAddress'
    },
    {
        title: '发件人',
        key: 'sender'
    },
    {
        title: '附加服务',
        key: 'service'
    }
],

 就是这里了，实际上就是个div，里面有a标签

render: function (h, params) {  
            return h('div', {}, [
                h('a', {
                    class: ['w-table-link'],
                    attrs: {
                        href: 'https://www.baidu.com/?wd=' + params.column.wayNo,
                        target: '_blank'
                    },
                    on: {
                        click: function (e) {
                            // e.preventDefault();
                            // e.stopPropagation();
                        }
                    }
                }, params.column.wayNo)
            ]);
        }

先理解下，回头再看