八、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);
};

5.form表单

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

　　vue+elementui 新增和编辑如何实现共用一个弹框