I write this for the first time to write bad also hope to point out as a result of the company’s product upgrade but prompted me from a back-end personnel self-study into front-end developers! The data management system made by the company can not do without tables, and then the table style is unified. What’s the idea of encapsulating a table+Pagination in Element-UI
Introduction and use of table components
<com-table title="Monitoring data" 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="Form Name" align="center">
</el-table-column>
<el-table-column label="Point" align="center">
<template slot-scope="scope" v-if="scope.row.point.visible">
<el-input v-model="scope.row.point.value" placeholder="Please enter the content" @focus="focuspoint(scope.row.point)"></el-input>
</template>
</el-table-column>
<el-table-column label="Project" align="center">
<template slot-scope="scope" v-if="scope.row.item.visible">
<el-input v-model="scope.row.item.value" placeholder="Please enter the content" @focus="focusitem(scope.row.item)"></el-input>
</template>
</el-table-column>
</template>
</com-table>
Copy the codeUse the slot to use the same as the original 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: [].// Select data}},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 += ` table [${str}Please select factor ';
info = true;
}
if (item.point.visible && item.point.value == "") {
if (info) {
message += Please select measuring point/section! `;
} else {
message += ` table [${str}Please select survey point/section! `;
}
info = true;
}
if (info) {
message += "<br/>"
}
data.push({
"AutoID": "1"."STCode": ""."PCode": ""."RCode": ""."RScode": ""."GDCODE": ""."type": this.moduletype,
"itemcodeList": item.item.value.split(', ').join(A '^'),
"path": `The ${this.path.TempletExportSetting}The ${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: 'Export failed! '.type: 'error'}); }})}else {
this.$message({
dangerouslyUseHTMLString: true.customClass: 'el-message_new'.message: message,
type: 'warning'}); }}else {
this.$message({
customClass: 'el-message_new'.message: 'Please select the list to export first! '.type: 'warning'
});
}
},
formatJson(filterVal, jsonData) {
return jsonData.map(v= >
filterVal.map(j= > {
returnv[j]; })); }}}Copy the codeComTable components
<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' / / paging
export default {
name: 'com-table'.props: {
value: {/ / data
type: [Array.Object].default: (a)= > {
return[]; }},PageSize: {// How many pieces of data are displayed on the current page
type: Number.default: 20
},
page_sizes: {// Paging rules
type: Array.default: (a)= > {
return [1.20.40.60.80]}},current_page: {// The current page
type: Number.default: (a)= > {
return 1; }},layout: {
type: String.default: (a)= > {
return 'total, sizes, prev, pager, next, jumper'; }},title: {/ / table title
type: String.default: (a)= > {
return ' '; }},loading: {
type: Boolean.default: false
}
},
data() {
return {
tableData: [].// Page index
PageIndex: this.current_page,
// The number of pages to display
Size: this.PageSize,
oldmultipleSelection: [].// The old selected value
multipleSelection: []// Currently selected data}},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: {
// Get paged data
getpagedata() {
var common = new commomway();
this.tableData = common.pagination(this.PageIndex, this.Size, this.value, false);
this.$emit("input".this.value);
setTimeout((a)= > {// Checkbox execution is delayed due to table re-rendering
this.toggleSelection(this.oldmultipleSelection)
}, 20)},// Triggered when clicking the number of pages displayed
handleSizeChange: function (val) {
this.Size = val;
this.getpagedata();
this.$emit('handleSizeChange', val);
},
// Triggered when turning pages
handleCurrentChange: function (val) {
this.PageIndex = val;
this.getpagedata();
this.$emit('handleCurrentChange', val);
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selection-change', val);
},
toggleSelection(rows) {/ / check the value
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>
Copy the codecommonway.js
class CommonWay {
/ * * * the description: Author :bilimumu * date:2017-10-28 * @param {number} [pageNo=1] Page number * @param {number} [pageSize=10] Page number * @param {any} [obj=[]] Array to be paging * @param {Boolean} [iscreateNewdata=true] Whether to create new data * @returns a new array * @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
Copy the codecom-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; }}Copy the code