代码示例看源码
html:
<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>
js:
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'
}
}
Events:
事件名称 | 说明 |
---|---|
startDownload | excel导出开始 |
finishDownload | excel导出结束 |
batchImport | 批量导入 |
downloadTemplate | 模板下载 |