本人第一次寫這個 寫的不好還望指出來
作為一個由於公司產品的升級然促使我從一個後端人員自學變成前端的開發人員 ！
公司做的資料管理系統所以離不開表格了 然後表格樣式統一啥的就想到封裝一個element-ui 裡面的table+Pagination了
效果圖
表格元件的引入與使用
<com-table title="監測資料" v-model="tableData4" @selection-change="handleSelectionChange">
<template>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column prop="name" label="表格名稱" align="center">
</el-table-column>
<el-table-column label="測點" align="center">
<template slot-scope="scope" v-if="scope.row.point.visible">
<el-input v-model="scope.row.point.value" placeholder="請輸入內容" @focus="focuspoint(scope.row.point)"></el-input>
</template>
</el-table-column>
<el-table-column label="專案" align="center">
<template slot-scope="scope" v-if="scope.row.item.visible">
<el-input v-model="scope.row.item.value" placeholder="請輸入內容" @focus="focusitem(scope.row.item)"></el-input>
</template>
</el-table-column>
</template>
</com-table>
複製程式碼使用插槽slot 使用起來就和原來的table一樣了
import comTable from '@/components/common/com-table'
import { GetTempletExportList, GetTempletExportInfo } from '../../../api/transfer/index'
import ApiConfig from '@/api/ApiConfig'
export default {
name: 'templet',
components: {
comTable
},
data() {
return {
tableData4: [],
exporttableData: [],
multipleSelection: [],
currentpoint: null,
currentitem: null,
itemdialogshow: false,
pointdialogshow: false,
path: new ApiConfig().GetConfig().SysPath,
checkeditem: [],//選中資料
}
},
computed: {
moduletype() {
return this.$store.state.moduletype;
},
userinfo() {
return this.$store.state.user.userInfo;
}
},
watch: {
moduletype() {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
GetTempletExportList(this.userinfo.cityid, this.moduletype).then(re => {
this.exporttableData = re.data;
this.tableData4 = [];
re.data.map(item => {
this.tableData4.push({
name: item.fldTableDesc,
point: {
visible: false,
value: ''
},
item: {
visible: true,
value: item.ItemList
}
})
})
}, (error) => {
this.$message({
customClass: 'el-message_new',
message: error,
type: 'error'
});
})
},
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val;
},
focuspoint(val) {
this.currentpoint = val;
},
focusitem(val) {
this.currentitem = val;
this.itemdialogshow = true;
},
itemconfirm() {
this.itemdialogshow = !this.itemdialogshow;
},
itemhandleClose(done) {
this.itemdialogshow = false;
},
ItemGroupSelectchange(val) {
this.checkeditem = val;
console.log(this.checkeditem);
let groupitemcontent = [];
val.map(item => {
groupitemcontent.push(item.fldItemName);
})
this.currentitem.value = groupitemcontent.join(',');
},
submit() {
if (this.multipleSelection.length > 0) {
let message = "";
let data = [];
let name = "";
this.multipleSelection.map((item, index) => {
name = item.name;
let str = item.name;
let info = false;
if (item.item.visible && item.item.value == "") {
message += `表[${str}]請選擇因子`;
info = true;
}
if (item.point.visible && item.point.value == "") {
if (info) {
message += `、請選擇測點/斷面！`;
} else {
message += `表[${str}]請選擇測點/斷面！`;
}
info = true;
}
if (info) {
message += "<br/>"
}
data.push({
"AutoID": "1",
"STCode": "",
"PCode": "",
"RCode": "",
"RScode": "",
"GDCODE": "",
"type": this.moduletype,
"itemcodeList": item.item.value.split(',').join('^'),
"path": `${this.path.TempletExportSetting}${this.moduletype}.json`,
"IsNeedNullData": "Y"
})
})
if (message == "") {
GetTempletExportInfo(data).then(re => {
if (re.status == "ok") {
var exportdata = eval((re.data));
const { export_json_to_excel } = require("../../../libs/Export2Excel");
if (exportdata[0].merg.length != 0) {
var exdata = [];
var itemlistUnit = [];
var itemlistfldCharCode = [];
for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) {
itemlistUnit.push(exportdata[0].head[z]);
itemlistfldCharCode.push(exportdata[0].head[z])
}
this.checkeditem.map(item => {
itemlistUnit.push(item.fldUnit);
itemlistfldCharCode.push(item.fldCharCode);
})
var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
exdata.unshift(itemlistUnit);
exdata.unshift(itemlistfldCharCode);
exdata.unshift(exportdata[0].head);
console.log(exdata)
exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
export_json_to_excel([name], exdata, name, exportdata[0].merg);
} else {
var exdata = this.formatJson(exportdata[0].head, exportdata[0].data);
exdata.unshift(exportdata[0].head);
exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
export_json_to_excel([name], exdata, name, exportdata[0].merg);
}
} else {
this.$message({
message: '匯出失敗！',
type: 'error'
});
}
})
} else {
this.$message({
dangerouslyUseHTMLString: true,
customClass: 'el-message_new',
message: message,
type: 'warning'
});
}
} else {
this.$message({
customClass: 'el-message_new',
message: '請先選擇要匯出的列表！',
type: 'warning'
});
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
}
}
}
複製程式碼comTable元件
<template>
<div class="com-table">
<div class="com-table-title" v-if="title">
{{title}}
</div>
<div :class="[title?'com-table-content':'com-table-content-nottitle']">
<el-table v-loading="loading" ref="multipleTable" stripe :data="tableData" style="width: 100%;" height="100%" border @selection-change="handleSelectionChange" @row-click="rowClick" @row-dblclick='rowDblclick' @cell-dblclick="celldblclick">
<slot></slot>
</el-table>
</div>
<div class="com-table-page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageIndex" :page-sizes="page_sizes" :page-size="Size" :layout="layout" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import commomway from '../../common/commonway.js' //分頁
export default {
name: 'com-table',
props: {
value: {//資料
type: [Array, Object],
default: () => {
return [];
}
},
PageSize: {//當前一頁顯示多少條資料
type: Number,
default: 20
},
page_sizes: {//分頁規則
type: Array,
default: () => {
return [1, 20, 40, 60, 80]
}
},
current_page: {//當前所在頁
type: Number,
default: () => {
return 1;
}
},
layout: {
type: String,
default: () => {
return 'total, sizes, prev, pager, next, jumper';
}
},
title: {//表格title
type: String,
default: () => {
return '';
}
},
loading: {
type: Boolean,
default: false
}
},
data() {
return {
tableData: [],
//頁數索引
PageIndex: this.current_page,
//每頁顯示的數量
Size: this.PageSize,
oldmultipleSelection: [],//舊的選中值
multipleSelection: []//當前選中資料
}
},
watch: {
value(val) {
this.getpagedata();
},
tableData(val) {
// console.log(val);
},
multipleSelection(val, old) {
this.oldmultipleSelection = old;
}
},
mounted() {
this.getpagedata();
},
computed: {
total() {
return this.value.length;
}
},
methods: {
//獲得分頁後的資料
getpagedata() {
var common = new commomway();
this.tableData = common.pagination(this.PageIndex, this.Size, this.value, false);
this.$emit("input", this.value);
setTimeout(() => {//由於表格重新渲染延遲執行勾選
this.toggleSelection(this.oldmultipleSelection)
}, 20)
},
//點選每頁顯示數量時觸發
handleSizeChange: function (val) {
this.Size = val;
this.getpagedata();
this.$emit('handleSizeChange', val);
},
//翻頁的時候觸發
handleCurrentChange: function (val) {
this.PageIndex = val;
this.getpagedata();
this.$emit('handleCurrentChange', val);
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selection-change', val);
},
toggleSelection(rows) {//勾選值
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
rowClick(row, event, column){
this.$emit('row-click', row, event, column);
},
celldblclick(row, column, cell, event){
this.$emit('cell-dblclick', row, column, cell, event);
},
rowDblclick(row,enent){
//console.log(row,enent)
}
}
}
</script>
<style lang="sass">
@import "./com-table.scss";
</style>
複製程式碼commonway.js
class CommonWay {
/**
* description：對陣列的分頁處理
* author:bilimumu
* date:2017-10-28
* @param {number} [pageNo=1] 頁碼
* @param {number} [pageSize=10] 每頁顯示條數
* @param {any} [obj=[]] 待分頁的陣列
* @param {Boolean} [iscreateNewdata=true] 是否建立新的資料
* @returns 返回新的陣列
* @memberof CommonWay
*/
pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) {
var array = [];
if (iscreateNewdata) {
array = JSON.parse(JSON.stringify(obj));
} else {
array = obj;
}
var offset = (pageNo - 1) * pageSize;
return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
}
}
export default CommonWay
複製程式碼com-table.scss
.com-table {
height: 100%;
width: 100%;
&-title {
color: #FFF;
background: #42A2F5;
padding: 0;
font-size: 15px;
height: 40px;
line-height: 40px;
text-indent: 8px;
}
&-content {
width: 100%;
height: calc(100% - 40px - 55px);
}
&-content-nottitle {
width: 100%;
height: calc(100% - 55px);
}
&-page {
height: 55px;
width: 100%;
background: #EFF3F8;
display: flex;
align-items: center;
justify-content: center;
}
}
複製程式碼