[VUErender-header]#tag:vue,render-header

table.vue

<template lang="html">
    <div>
        <el-table
        :data="tableData"
        height="550"
        highlight-current-row
        border>
            <el-table-column prop="id" label="#" width="65" :render-header="renderHeader" align="center">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="serial" label="编码">
            </el-table-column>
            <el-table-column prop="note" label="备注">
            </el-table-column>
            <el-table-column>
                <template scope="scope">
                    <el-button @click="showForm(scope.row)" icon="edit"></el-button>
                    <el-button type="danger" @click="deleteRow(scope.row.id)" icon="delete"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="提示" v-model="dialogVisible" size="large">
            <accessory-form :accessory-form="accessoryForm">

            </accessory-form>
        </el-dialog>
    </div>
</template>

<script>
import AccessoryForm from './form'

export default {
    data() {
        // data在component中必须以函数形式实现 不能以对象形式
        return {
            tableData: [],
            dialogVisible: false,
            accessoryForm: {id: '', cate: '1', name: '', code: '', note: ''}
        }
    },
    created() {
        this.$events.on('custom_response_accessory_table', data => this.tableData = data)
    },
    mounted(){
        this.$events.emit('custom_request_accessory_table', '1')
    },
    methods: {
        renderHeader(createElement, { column }) {
            return createElement(
              'el-button', {attrs: {size: 'mini', type: 'primary', icon: 'plus'}, on: {

                  click: this.showForm
              }}
            );
        },
        showForm(data = null){
            if(data){
                this.accessoryForm = data
            }
            this.dialogVisible = true
        },
        editRow(id){
            this.$router.push('/accessory/edit/' + id)
        },
        deleteRow(id){
            this.$events.emit('custom_delete_accessory_single', id)
        }

    },
    components: {
        AccessoryForm
    }
}
</script>

<style lang="css">
</style>