  .container{
           c_header{
                   width:100%;
                    height:60px;
                    position:absolute;
                    left:0;
                    top:0
                   background:#f00; //红色，方便前期观看，后期还需注掉
                    z-index：999
          }
              c_left{
                     width:200px;
                      position:absolue;
                       left:0;
                       top:0;
                       bottom:0;
                       margin-top:60px;
                       background:#f90;//橘黄色
           }
                c_right{
                       position:absolute;
                        top:0;
                        right:0;
                       left:200px;
                       bottom:0;
                       background:#0f9;//绿色

           }

}

5. Enter text into the head div intelligent logistics management system

And add styles to the header to center it:

 text-align:center;  line-height:60px; font-size:22px

6. Create the Menuleft.vue file in the layout folder;

Introduce the Menuleft.vue file on the home page, and register Menuleft in the third subset div class named c_right on the home.vue page, and give an exit <router-view></router-view>! ! !

7. Create an until folder in src, and create request.vue in it (for axios)

<1   引入axios 
 <2 创建实例
     let  service =axios.create({
         baseURL:"http://localhost:8081",
         timeout:5000
    })
        service.interceptors.request.use(config=>{
           return config
    }),error=>Promise.reject(error)

         service.interceports.response.use(response=>{
            let  res=response.data;
             return  res
    }, error=>reject(error))
     导出
      export  default service;

8. Create an api folder in src, and create excel.js in it and introduce the request.vue file in it

   export function  getDataList(){
       return  request({
                 url:'excel/get'
                 method:"get"
     })
  }

9. In the export file download-excel.vue file

<1 Import excel.js under the api file import { getDataList} from './../api/excel'

<2 Put an empty array in data and name it tableData

<3 in created this.getData()

<4 In the methods method, get data,

getData(){       getDataList().then(res=>{            console.log("res"，res);         })     }

10. Create a folder mock in src and create index.js

<1 引入mock import mock from 'mockjs'

mock.setup({ timeout:'300-600'      })      
  Mock.mock(/\/excel\/get/,'get')

11. Create the excel.js file in the mock file

//The data returned by the mock interface import Mock from 'mockjs'

//模拟资金管理后台数据
import Mock from 'mockjs' // 导入mockjs 模块

let List = []// 定义我们需要的数据
const count = 10

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({// 根据数据模板生成模拟数据
    id: Mock.Random.guid(),// 随机生成一个id
    username: Mock.Random.cname(),// 随机生成一个常见的中文姓名。
    address: Mock.mock('@county(true)'),// @county(true)为数据模板
    createTime: Mock.Random.datetime(),//生成时间
    income: Mock.Random.integer(0, 9999),//生成随机数
    pay: Mock.Random.integer(0, 9999), //生成随机数
    accoutCash: Mock.Random.integer(0, 9999),//生成随机数
	checked:false//标识当前数据状态
  }))

}
export default{
	getMoneyList:config =>{
		return{
			code:200,
			data:{
				list:List,
			}
		}
	}
}

12. <1 import excel in index.js in mock

Introduce the index in the mock in main.js

13 Export function

<1 The method in the download-excel.vue file;

 methods: {
    getDateFn() {
      getDateList().then((res) => {
        this.tableData = res.data.list;
      });
    },
    handleDownload() {
      this.downloadLoading = true;
      //自定义的头部
      const tHeader = ["姓名", "籍贯", "投资时间", "收入", "支出", "账户现金"];
      //自定义的字段
      const filterVal = [
        "username",
        "address",
        "createTime",
        "income",
        "pay",
        "accoutCash",
      ];
      getDateList().then((res) => {
        if (res.code == 200) {
          const data = this.formatJson(filterVal, res.data.list);
          export_json_to_excel({
            header: tHeader, //excel头部列表
            data, //数据
            filename: "2109_测试文件", //文件名称
            autoWidth: true, //自适应宽
            bookType: "xlsx", //文件类型
          });
          this.downloadLoading = false;
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};

<2 Introduce vendor in download-excel.vue

statement:

Some parts are omitted here: Rough steps;

Vue project upload and download excel chart (idea)

Import and export ideas:

1. Create a folder under components and create a file home.vue;

2. Create the file download-excel.vue download file and upload-excel.vue upload file under views, configure the route in the routing file, and use lazy loading to import it! !

3. In the home page, name a parent div and a single subset div by class: parent "container", the subsets are "c_header", "c_left", "c_right";

4 Give the page layout: