8、vue使用element-ui組件

element-ui組件

1.引入element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

const vue = new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

export default vue;

2.table表格+Pagination分頁

　　http://element-cn.eleme.io/#/zh-CN/component/table

　　http://element-cn.eleme.io/#/zh-CN/component/pagination

　　2.1分頁使用：

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :pager-count="7"
                    :page-sizes="[5, 10, 15]"
                    :page-size="size"
                    :current-page="currentPage"
                    :total="count"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>

handleSizeChange(val) {//pageSize改變時回調
                console.log(`每頁 ${val} 條`);
                this.size = val;
                this.getCommodityList();
            },
            handleCurrentChange(val) {//currentPage改變時回調
                console.log(`當前頁: ${val}`);
                this.currentPage = val;
                this.getCommodityList();
            },

　　2.2表格自定義排序

　　1.Table 上監聽sort-change事件

@sort-change='sortChange'

　　2.自定義排序

sort-change方法自帶三個參數，分別表明意義是：

column：當前列

prop：當前列須要排序的數據

order：排序的規則（升序、降序和默認[默認就是沒排序]）

sortChange(column, prop, order) {//自定義排序
                console.log(column)
                if (column.prop == null) {
                    this.sortName = '默認排序字段';
                } else {
                    this.sortName = column.prop;
                }
                if (column.order == 'ascending') {
                    this.sortType = 'ASC';
                } else {
                    this.sortType = 'DESC';
                }
                this.loadProductList();
            }

　　3.須要排序的字段添加

sortable="custom"

　　4.合併單元格

　　　　https://blog.csdn.net/hefeng6500/article/details/82778680

3.文件上傳（自定義上傳）

　　http://element-cn.eleme.io/#/zh-CN/component/upload

　　el-upload默認選擇文件就上傳，能夠經過:auto-upload='false'設置，

　　upload方法在上傳文件中是以FormData的格式上傳，能夠經過http-request屬性覆蓋默認的上傳行爲。

　　使用base64轉碼後進行上傳實現：

　　　　1.options：經過options參數能夠拿到upload組件全部的參數。options.file則是操做的文件。

　　　　2.使用FileReader進行base64轉碼

editUploadPic(options) {
                console.log(options)
                if (!window.FileReader) {
                    console.error('你的瀏覽器不支持FileReader API，請使用更高級的瀏覽器!')
                }
                let fileReader = new FileReader();
                let file = options.file;
                if (file) {
                    fileReader.readAsDataURL(file);
                }
                fileReader.onload = () => {
                    let base64Str = fileReader.result;
                    options.onSuccess(base64Str, file)
                }
            },

　　　　3.經過:on-success="handleServiceAvatarScucess"，文件上傳成功時的鉤子，進行賦值

handleServiceAvatarScucess(res, file) {//重寫上傳方法,轉BASE64成功後，設置圖片
                this.ruleEditForm.thumbnail = res;
            },

　　參考：ElementUI之el-upload實現base64上傳

　　把上傳的csv文件轉json

　　　　上傳文件以前的鉤子before-upload進行操做，

　　　　使用papaparse插件進行csv轉json

beforeUpload(file) {
                let excelfileExtend = ".csv";//設置文件格式
                let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
                if (!excelfileExtend.includes(fileExtend)) {
                    this.$message.error('文件格式錯誤');
                    return false;
                }
                //csv2json
                papaparse.parse(file, {
                    header: true,
                    complete: results => {
                        console.log(results.data);
                        let inventoryRequests = results.data;
                        
                    }
                })
                return false;
            },

4.js實現json轉excel

　　封裝模塊

/**
 * json轉excel模塊
 */

const JSONToExcelConvertor = (JSONData, FileName, ShowLabel) => {
    //先轉化json
    var arrData = typeof JSONData != "object" ? JSON.parse(JSONData) : JSONData;

    var excel = "<table>";

    //設置表頭
    var row = "<tr>";
    for (var i = 0, l = ShowLabel.length; i < l; i++) {
        row += "<td>" + ShowLabel[i].value + "</td>";
    }

    //換行
    excel += row + "</tr>";

    //設置數據
    for (var i = 0; i < arrData.length; i++) {
        var row = "<tr>";

        for (var index in arrData[i]) {
            var value =
                arrData[i][index].value === "." ? "" : arrData[i][index].value;
            row += "<td style=\"mso-number-format:'\\@';\">" + value + "</td>";
        }

        excel += row + "</tr>";
    }

    excel += "</table>";

    var excelFile =
        "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
    excelFile +=
        '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile +=
        '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "{worksheet}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";

    var uri =
        "data:application/vnd.ms-excel;charset=utf-8," +
        encodeURIComponent(excelFile);

    var link = document.createElement("a");
    link.href = uri;

    link.style = "visibility:hidden";
    link.download = FileName + ".xls";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

export const json2excel = (
    header = new Array(),
    content = new Array(),
    title = new Date().getTime.toString
) => {
    if (header instanceof Array == false) {
        alert("表頭必須是數組");
        return false;
    }
    if (content instanceof Array == false) {
        alert("內容必須是數組");
        return false;
    }
    if (content[0] instanceof Array == false) {
        alert("內容中的每一項必須是數組");
        return false;
    }
    if (!(typeof title == "string" && title.constructor == String)) {
        alert("表格名稱必須爲字符串");
        return false;
    }
    let excel = {
        header: new Array(),
        data: new Array()
    };
    for (let value of header.values()) {
        excel.header.push({
            value: value,
            type: "ROW_HEADER_HEADER",
            datatype: "string"
        });
    }
    for (let val of content.values()) {
        let b = new Array();
        for (let a of val) {
            b.push({ value: a, type: "ROW_HEADER" });
        }
        excel.data.push(b);
    }
    JSONToExcelConvertor(excel.data, title, excel.header);
};

View Code

5.form表單

　　http://element-cn.eleme.io/#/zh-CN/component/form

　　vue+elementui 新增和編輯如何實現共用一個彈框