# vue-element-admin

**Repository Path**: wxwcw/vue-element-admin

## Basic Information

- **Project Name**: vue-element-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: web
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-06
- **Last Updated**: 2022-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 创建项目

### 安装element

### 路由
```
/admin
   /admin/dashBoard
   /admin/msgLists
/item
   /item/itemAdd
   /item/itemLists
   /item/itemUpdate
/Login
/Setting
/NotFound
```

### 导出excel

安装 
```
npm i js-export-excel -S
```
```js
import ExportJsonExcel from 'js-export-excel'

    downloadFileToExcel () {
      const option = {}// option代表excel文件
      const dataTable = [] // excel文件中的数据内容
      if (this.tableData && this.tableData.length > 0) {
        for (const i in this.tableData) { // 循环获取excel中每一行的数据
          const obj = {
            商品名称: this.tableData[i].itemName,
            商品详情: this.tableData[i].itemDesc,
            商品价格: this.tableData[i].itemPrice,
            商品销量: this.tableData[i].sale,
            商品图片: this.tableData[i].thumb,
            商品内容: this.tableData[i].content,
            商品上架日期: this.tableData[i].createAt
          }
          dataTable.push(obj) // 设置excel中每列所获取的数据源
        }
      }
      option.fileName = '商品信息表' // excel文件名称
      option.datas = [
        {
          sheetData: dataTable, // excel文件中的数据源
          sheetName: '商品信息表', // excel文件中sheet页名称
          sheetFilter: ['商品名称', '商品详情', '商品价格', '商品销量', '商品图片', '商品内容', '商品上架日期'], // excel文件中需显示的列数据
          sheetHeader: ['商品名称', '商品详情', '商品价格(元)', '商品销量', '商品图片', '商品内容', '商品上架日期'] // excel文件中每列的表头名称
        }
      ]
      const toExcel = new ExportJsonExcel(option) // 生成excel文件
      toExcel.saveExcel() // 下载excel文件
    }
```

### 分页
```html
  <el-table
      :data="tableData.slice((currentPage2-1)*pageSize,currentPage2*pageSize)"
      style="width: 100%">
      <!-- 循环体 -->
  </el-table>
<!-- 分页器 -->
    <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[5, 15, 25, 50]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="tableData.length">
    </el-pagination>
```

```js
  data () {
    return {
      tableData: [],
      currentPage2: 1,
      pageSize: 5
    }
  }
      // 改变显示条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    // 改变显示页数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage2 = val
    }
```
### 导出pdf图表
```js
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
    handleExportPDF () {
      const element = document.getElementById('canlender')
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(element, {
        // height: node.offsetHeight,
        allowTaint: true,
        // allowTaint: true,
        logging: true,
        scale: 2 // 提升画面质量，但是会增加文件大小
      }).then(function (canvas) {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // 页面偏移
        var position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = 592.28 / contentWidth * contentHeight

        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        var pdf = jsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else { // 分页
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        pdf.setFont('simsun')
        pdf.save('值班时间表.pdf')
      })
    }
```

### 地图相关


### Vue相关

项目创建
vue脚手架 命令
   下载
   安装

vue环境配置

vue相关知识

  v-if  v-show 使目标显示隐藏， v-if 使目标不存在  v-show仅仅是隐藏

  生命周期常见八种 常用2个 created mounted 

  base64
 
var Base64 = {
    // private property
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
  
    // public method for encoding
    , encode: function (input) {
      var output = "";
      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
      var i = 0;
  
      input = Base64._utf8_encode(input);
  
      while (i < input.length) {
        chr1 = input.charCodeAt(i++);
        chr2 = input.charCodeAt(i++);
        chr3 = input.charCodeAt(i++);
  
        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;
  
        if (isNaN(chr2)) {
          enc3 = enc4 = 64;
        }
        else if (isNaN(chr3)) {
          enc4 = 64;
        }
  
        output = output +
          this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
          this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
      } // Whend 
  
      return output;
    } // End Function encode 
  
  
    // public method for decoding
    , decode: function (input) {
      var output = "";
      var chr1, chr2, chr3;
      var enc1, enc2, enc3, enc4;
      var i = 0;
  
      input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
      while (i < input.length) {
        enc1 = this._keyStr.indexOf(input.charAt(i++));
        enc2 = this._keyStr.indexOf(input.charAt(i++));
        enc3 = this._keyStr.indexOf(input.charAt(i++));
        enc4 = this._keyStr.indexOf(input.charAt(i++));
  
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
  
        output = output + String.fromCharCode(chr1);
  
        if (enc3 != 64) {
          output = output + String.fromCharCode(chr2);
        }
  
        if (enc4 != 64) {
          output = output + String.fromCharCode(chr3);
        }
  
      } // Whend 
  
      output = Base64._utf8_decode(output);
  
      return output;
    } // End Function decode 
  
  
    // private method for UTF-8 encoding
    , _utf8_encode: function (string) {
      var utftext = "";
      string = string.replace(/\r\n/g, "\n");
  
      for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
  
        if (c < 128) {
          utftext += String.fromCharCode(c);
        }
        else if ((c > 127) && (c < 2048)) {
          utftext += String.fromCharCode((c >> 6) | 192);
          utftext += String.fromCharCode((c & 63) | 128);
        }
        else {
          utftext += String.fromCharCode((c >> 12) | 224);
          utftext += String.fromCharCode(((c >> 6) & 63) | 128);
          utftext += String.fromCharCode((c & 63) | 128);
        }
  
      } // Next n 
  
      return utftext;
    } // End Function _utf8_encode 
  
    // private method for UTF-8 decoding
    , _utf8_decode: function (utftext) {
      var string = "";
      var i = 0;
      var c, c1, c2, c3;
      c = c1 = c2 = 0;
  
      while (i < utftext.length) {
        c = utftext.charCodeAt(i);
  
        if (c < 128) {
          string += String.fromCharCode(c);
          i++;
        }
        else if ((c > 191) && (c < 224)) {
          c2 = utftext.charCodeAt(i + 1);
          string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
          i += 2;
        }
        else {
          c2 = utftext.charCodeAt(i + 1);
          c3 = utftext.charCodeAt(i + 2);
          string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
          i += 3;
        }
  
      } // Whend 
  
      return string;
    } // End Function _utf8_decode 
  
  }