vue render 改造element-table

template 

<el-table
                        border
                        :data="list"
                        style="width: 100%">
                    <el-table-column
                            v-for="(item, index) in tableSetting"
                            :key="index"
                            :type="item.type"
                            :width="item.width"
                            :prop="item.prop"
                            :label="item.label"
                            :fixed="item.fixed">
                        <template slot-scope="scope">
                            <table-expand v-if="item.render" :params="scope" :renderFunc="item.render"></table-expand>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>
                    </el-table-column>

	</el-table>



	





	script



	
 import TableExpand from '@/components/table/expand'

tableSetting: [
                  
                    {
                        width: 160,
                        label: '工单编号',
                        prop: 'work_order_sn',
                        customDisplay: false,
                        render: (h, params) => {
                            return h('span', {
                                class: 'link-a',
                                on: {
                                    click: () => {
                                        this.showWorkOrderDialog(params.row);
                                    }
                                }
                            }, params.row.work_order_sn)
                        }
                    },
                    {
                        width: 100,
                        label: '工单状态',
                        prop: 'status',
                        customDisplay: false,
                        render: (h, params) => {
                            return h('span', this.$options.filters.escapeField(params.row.status, 'workOrderStatus'))
                        }
                    }
]

expand
export default {
    name: 'TableExpand',
    render: function (h) {
        return this.renderFunc(h, this.params);
    },
    props: {
        renderFunc: {
            type: Function
        },
        params: {
            type: Object
        }
    }
};