<data-grid  v-bind="datagrid">
    <!--在最前面添加自定义字段-->
    <template #extend-column-before>
        <el-table-column type="index" width="60px" label="序号"></el-table-column>
    </template>
    
    <!--在列表上方添加自定义按钮-->
    <template #batch-operation>
        <el-button @click="handleOpen('',{},'add')">新增</el-button>
    </template>
    
    <!--在最后面添加自定义字段-->    
    <template #extend-column-after>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleOpen(scope.$index, scope.row,'add')">编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleOpen(scope.$index, scope.row,'detail')">详情
                </el-button>
            </template>
        </el-table-column>
    </template>
</data-grid>

datagrid: {
    /*table事件 参考element-ui的table事件*/
    tableEvents: {
        'selection-change': 'handleSelectionChange'
    },
    /*table属性 参考element-ui的table属性*/
    tableAttributes: {
        showHeader: true,
        border: false,
        height: 'calc(100vh - 200px)',
        stripe: true,//是否斑马线
    },
    /*导出excel属性设置*/
    exportAttributes: {
        name: new Date().getTime(), // excel文件名称
        title: '我是标题', // 内容标题
        footer: '我是页脚', // 内容页脚
        worksheet: '导出测试页' // 自定义sheet名称
    },
    /*便捷操作按钮组*/    
    convenientButtons: {
        size:'small', //按钮尺寸:medium、small、mini 
        export: {
            label: '导出', //显示的字段
            icon: 'el-icon-download', //显示的图标
            exportType: 'batch' //导出数据模式, all: 当前表格中所有数据  batch: 勾选的数据 (只限export使用该属性)
        },
        import: {
            label: '导入',
            icon: 'el-icon-upload2'
        },
        template: {
            label: '模板下载',
            icon: 'el-icon-s-unfold'
        },
        screenColumn:{
            icon:'el-icon-s-unfold',
            label:'筛选表字段',
            class:'nh-screen' //自定义class (export/import/template 都支持自定义class)
        },
    },
    /*是否开启筛选字段*/
    /*显示的列*/
    tabColumn: [
        {prop: "date", label: "日期", width: "20",show:true},
        {prop: "name", label: "姓名", width: "20",show:true},
        {prop: "gender", label: "性别", width: "10",show:true},
        {prop: "address", label: "地址",width: "30",show:true},
        {prop: "ads", label: "ADS",width: "20",show:true},
    ],
    /*table数据*/
    tabData: [
        {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            gender: '男'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }],
    /*分页属性*/
    pageAttributes: {
        pageNum: 1,
        pageSize: 16,
        total: 50,
        pageSizes: [10, 20, 50],
        layout: "total, prev, pager, next, sizes, jumper",
        pageClass: 'page-test'
    },
    /*page的事件*/
    pageEvents: {
        'size-change': 'handleSizeChange',
        'current-change': 'handleCurrentChange'
    }
}