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;
http://element-cn.eleme.io/#/zh-CN/component/tablecss
http://element-cn.eleme.io/#/zh-CN/component/paginationhtml
2.1分頁使用:vue
<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表格自定義排序element-ui
1.Table 上監聽sort-change
事件json
@sort-change='sortChange'
2.自定義排序數組
sort-change方法自帶三個參數,分別表明意義是:瀏覽器
column:當前列app
prop:當前列須要排序的數據ide
order:排序的規則(升序、降序和默認[默認就是沒排序])post
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
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; },
封裝模塊
/** * 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); };