学生生请假系统学习六

导出数据形成一个表格

1:在Teacher.vue页面新建一个按钮 绑定事件
 <el-button type="primary" @click="exportLeaveList">导出请假信息</el-button>
2:引入导出excel的方法
import  {exportExcel} from "../until/excel"
3:完善事件
exportLeaveList(){
    //第一个参数表头  第二个内容  第三个文件名称
        exportExcel(this.header,this.allList.map(item=>{
          if(item.type==1){
            item.type="待审批";
          }else if(item.type==2){
            item.type="已同意";
          }else{
            item.type="已拒绝";
          }
          return  item;
        }),"学生请假信息.xlsx")

      }
4:完善数据
data() {
    return {
      allList: [],
      header:[
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
            className: 'text-monospace',
        }, {
            title: '请假理由',
            dataIndex: 'leavereason',
            key: 'leavereason',
        }, {
            title: '开始时间',
            dataIndex: 'start',
            key: 'start',
        },
        {
            title: '结束时间',
            dataIndex: 'end',
            key: 'end',
        },
         {
            title: '状态',
            dataIndex: 'type',
            key: 'type',
        }
    ]
    };
  },

 

posted @ 2021-09-03 19:32  JSkolo_yyds  阅读(55)  评论(0编辑  收藏  举报