基于Vue+element-ui 的Table二次封装的实现

前端之家收集整理的这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本人第一次写这个 写的不好还望指出来

作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 !

公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了

效果

表格组件的引入与使用

名称" align="center"> 内容" @focus="focuspoint(scope.row.point)"> 内容" @focus="focusitem(scope.row.item)">

使用插槽slot 使用起来就和原来的table一样了

{ 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,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,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组件