【下载文档:  基于Vue+element-ui 的Table二次封装的实现.txt 】

---

基于Vue+element-ui 的Table二次封装的实现
本人第一次写这个 写的不好还望指出来
作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了
效果图
表格组件的引入与使用



使用插槽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 += "
"
}
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组件



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;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。