前言

日常业务中我们偶尔会用到使用通用模板渲染不同样式表格的需求，已避免重复开发的工作量；本文基于此场景谈谈如何解决此类问题

一、需求分析

针对上述需求描述，我们提取的信息有两部分：①通用模板 ②支持不同样式表格的渲染。那我们应该如何处理呢。
方案一：
首先要达到一个通用模板要支持不同样式的表格渲染的目的，这就意味着咱们的渲染出的内容是要根据渲染的内容去定义的。从这个角度来看我们可以在前台根据不同的渲染内容，预置对应的渲染模板。根据内容不同使用不同样例渲染即可。
方案二：
上述方案一从结果上来说能够满足咱们的业务需求，然不推荐大家采取此方案。究其原因有以下几点：

预置模板，局限性高，不够灵活
基于模板进行渲染，业务发生变化时，需要维护模板
重复性的模板定制工作，工作量大，无意义的重复性工作

因此我们提出了第二种方案。此方案我们不再预置各种渲染模板，所有渲染样式采用数据驱动，避免模板定制工作，同时有效的解决了预制模板的局限性问题。

二、实施方案

1.方案解析

我们在此处对方案二进行拆解。原理和后端定义接口或父类一样，我们需要分析渲染的前置条件，并将其高度汇聚、抽象为一个通用模板。
需要提取的公有信息有这么三点：
其一展示的数据
其二数据的解析规则
其三渲染的样式
公有信息我们已经拆解出来了，当然如果咱们有一些其它的处理按此逻辑自行加入即可，下一步就是撸码的时候了，需要做的就是使用通过模板解析、渲染这些公有信息。如此，功德圆满。

2.实例

为了便于各位理解和使用，于此处附上实例供各位参考.这里我使用的是vue的方式实现。js或其它框架也可按上述方案处理。此处就不一一列出。
1.解析模板
入口

<template><div class="contain"><van-nav-bar fixed :title="name"><template #left><router-link :to="{path:back_path,query:{back_path:'/tjxx'}}"><van-icon name="arrow-left" size="22PX" /></router-link></template></van-nav-bar><div class="table-title">{{table_name}}</div><div class="my-table"><my-table  v-if="tableShow" :col="tableData.keys" :data="tableData.tabels"></my-table></div></div>
</template>
<script>import api from '@/api/index.js';//数据请求api
import myTable from './elTabel'  //表格渲染组件
export default {name: "App",components: {myTable},data() {return {dot0:this.GLOBAL.dot0,dot1:this.GLOBAL.dot1,dot2:this.GLOBAL.dot2,back_path: '/tjxx/tjfx',show: false,tableData:{qbn:"----",qby:"--",qbj:"-",keys:[],tabels:[],values:[]},colData:[],minDate: new Date(2019, 0),maxDate: new Date(2025, 10),currentDate: new Date(),name: '',configId:'',table_name:'',tableShow:true,// 使组件重新渲染变量col: [{prop: 'date',label: '日期'}],data: []};},methods: {//日期处理formatter_Date(thistime, fmt) {let $this = new Date(thistime);fmt = fmt || "yyyy-MM";let o = {"M+": $this.getMonth() + 1,"d+": $this.getDate(),"h+": $this.getHours(),"m+": $this.getMinutes(),"s+": $this.getSeconds(),"q+": Math.floor(($this.getMonth() + 3) / 3),S: $this.getMilliseconds(),};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,($this.getFullYear() + "").substr(4 - RegExp.$1.length));}for (var k in o) {if (new RegExp("(" + k + ")").test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ("00" + o[k]).substr(("" + o[k]).length));}}let json = {qbn:fmt.split('-')[0],qby:fmt.split('-')[1]}return json;},//日期处理formatter(type, val) {if (type === "year") {return val + "年";}if (type === "month") {return val + "月";}return val;},showPopup() {this.show = true;},confirm(a) {this.show = false;this.tableData.qbn=this.formatter_Date(a).qbn;this.tableData.qby=this.formatter_Date(a).qby;this.loadData();},cancel() {this.show = false;},init(){//加载数据this.loadData();},loadData(){let self = this;let reg = /^(-?\d+)(\.\d+)?$/;api.getFileData('/filehandler/queryInfoByZB?config_id=' + self.configId).then((res)=>{self.tableData.keys = []let data = res.data.headersself.tableData.qbn=res.data.tableData[0]['qbn'];self.tableData.qby=res.data.tableData[0]['qby']==""&&res.data.tableData[0]['qbj']?res.data.tableData[0]['qbj']*3:res.data.tableData[0]['qby'];self.tableData.qby1 = self.tableData.qby;self.tableData.qby2 = self.dateChange(self.tableData.qby);self.tableData.qbj=res.data.tableData[0]['qbj'];self.tableNameHandler();//报告期别let json = self.getclDate(data)if (res.data.fixedNum == 1) {json[0]['fixedNum'] = 1}if(res.data.fixedNum == 2){json[0]['fixedNum'] = 1json[1]['fixedNum'] = 1}if(res.data.fixedNum == 3){json[0]['fixedNum'] = 1json[1]['fixedNum'] = 1json[2]['fixedNum'] = 1}//数据处理json.forEach(function(item,i){let property=item['property']let percision=item['percision']let conversion=item['conversion']res.data.tableData.forEach(function(item2,j){let value=null;var regex = /[\u4E00-\u9FA5\uF900-\uFA2D]/;//中文处理if(!regex.test(item2[property])&&!item2[property]==""){//单位换算value=parseFloat(item2[property])*conversion;//精度处理value =percision=="null"?value:value.toFixed(percision);}else{value=item2[property]}item2[property]=value;})})self.tableData.tabels = res.data.tableData//  表头解析for (const item in json) {if (json[item].role && json[item].role[1] > 1) {json[item]['children']=[];for (let i = 1; i <= json[item].role[1]; i++) {json[item]['children'].push(json[parseInt(item) + i])}self.tableData.keys.push(json[item])json.splice(parseInt(item),json[item].role[1])}else{self.tableData.keys.push(json[item])}}})},getclDate(data){let self = thislet colName = []let percision = [],conversion=[]data.forEach((item,index)=>{colName.push(item.property)percision.push(item.percision)conversion.push(item.conversion)item.role[0] =  Number(item.role[0])item.role[1] = Number(item.role[1])if (item.label.indexOf('XXJD')!=-1) {return item.label = (item.label).replace(/XXJD/g,self.tableData.qbj)}if (item.label.indexOf('YYYY年1-MM')!=-1) {return item.label =(item.label).replace(/YYYY年1-MM/g,self.tableData.qbn +'年'+self.tableData.qby2)}if(item.label.indexOf('IYYYY')!=-1){return item.label =(item.label).replace(/IYYYY/g,self.tableData.qbn -1)}if(item.label.indexOf('YYYY')!=-1){return item.label =(item.label).replace(/YYYY/g,self.tableData.qbn)}if(item.label.indexOf('1-MM')!=-1){return item.label =(item.label).replace(/1-MM/g,self.tableData.qby2)}if(item.label.indexOf('MM')!=-1){return item.label =(item.label).replace(/MM/g,self.tableData.qby1)}if(item.label.indexOf('IMM')!=-1){return item.label =(item.label).replace(/IMM/g,self.tableData.qby1 -1)}if (item.label.indexOf('YYYY')!=1) {return item.label =item.label}})for(let index in colName){if(colName[index]!="null"){self.colData.push({colName: colName[index], percision: percision[index],conversion:conversion[index]});}}return data},tableNameHandler(){let self = this;self.table_name = `报告期别：${self.tableData.qbn}年${self.tableData.qby}月`self.name = self.$route.query.nameself.configId = self.$route.query.configId},// 日期处理dateChange(val){if(val == 1){return val = "1"}else{return  val = "1-" + val}},},created(){this.tableNameHandler();},mounted() {let self=this;self.back_path=self.$route.query.back_path!=null?self.$route.query.back_path:self.back_path;self.init();},
};
</script><style lang="less" scoped>
</style>

el-table

<template><div class="my-table"><el-table :data="data"ref="table":table-style="{background:'#333333'}" :cell-style="{color:'#388afa', background:'#fff',align:'center'}":header-cell-style="{color:'rgba(68, 78, 109, 1)', background:'rgba(219, 228, 239, 1)'}" class="contain-page"height="100%"style="border-radius: 5px; border: 5px solid #fff"><my-column v-for="(item,index) in col" :key="index" :col="item" ></my-column></el-table></div>
</template><script>
import MyColumn from './elColumn'
export default {components: {MyColumn},props: {col: {type: Array},data: {type: Array}},mounted(){setTimeout(() => {this.$nextTick(() => {this.$refs.table.doLayout()})}, 600)}
}
</script>
<style lang="less" scoped></style>

el-cloumn

<template><el-table-columnclass="tabcol":fixed="col.fixedNum == 1":prop="col.property":label="col.label"align="center"><template v-if="col.children && col.children.length"><my-column v-for="(item, index) in col.children":key="index":col="item"></my-column></template></el-table-column>
</template><script>
export default {name: 'MyColumn',props: {col: {type: Object}},data(){return{colName:[]}},filters: {col (text,val) {}},methods:{},mounted(){},created(){this.colName = this.col.property}
}
</script>
<style scoped>
.tabcol{width: 100%;
}
</style>

2.公有信息实例
结构图

数据实例

{"code":200,"data":{"headers":[{"percision":"null","role":["2","1"],"property":"zb","label":"指标","conversion":"1"},{"percision":"null","role":["2","1"],"property":"dw","label":"单位","conversion":"1"},{"percision":"null","role":["1","2"],"property":"null","label":"IYYYY年","conversion":"null"},{"percision":"1","role":["1","1"],"property":"snbytbzz","label":"1-MM月同比增长（%）","conversion":"1"},{"percision":"1","role":["1","1"],"property":"sntbzz","label":"1-12月同比增长（%）","conversion":"1"},{"percision":"1","role":["2","1"],"property":"bnzsmb","label":"YYYY年增速目标（%）","conversion":"1"},{"percision":"null","role":["1","7"],"property":"null","label":"YYYY年1-MM月上报情况","conversion":"null"},{"percision":"0","role":["1","1"],"property":"qys","label":"企业或项目数（个）","conversion":"1"},{"percision":"0","role":["1","1"],"property":"sbs","label":"上报企业或项目数（个）","conversion":"1"},{"percision":"1","role":["1","1"],"property":"sbl","label":"上报率（%）","conversion":"1"},{"percision":"2","role":["1","1"],"property":"dysb","label":"MM月当月上报总量","conversion":"1"},{"percision":"1","role":["1","1"],"property":"dytbzz","label":"MM月同比增长","conversion":"1"},{"percision":"2","role":["1","1"],"property":"ljbysb","label":"1-MM月上报总量","conversion":"1"},{"percision":"1","role":["1","1"],"property":"ljtbzz","label":"1-MM月同比增长（%）","conversion":"1"}],"tableData":[{"sort":"1","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"1","bnzsmb":" 1","qys":"1","sbs":"1","sbl":"100","dysb":"1","dytbzz":"1","ljbysb":"1","ljtbzz":"11","qbn":"2018","qby":"4","qbj":""},{"sort":"2","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"4.19078600","bnzsmb":"10.0","qys":"1161","sbs":"1161","sbl":"100.0000","dysb":"217.82530000","dytbzz":"2.84461200","ljbysb":"959.17640000","ljtbzz":"25.30938100","qbn":"2021","qby":"4","qbj":""},{"sort":"3","zb":"***","dw":"亿元","snbytbzz":"","sntbzz":"","bnzsmb":"-","qys":"342","sbs":"342","sbl":"100.00000000","dysb":"87.64900000","dytbzz":"2697.2330870635960000","ljbysb":"379.11620000","ljtbzz":"10.3204423104903200","qbn":"2021","qby":"4","qbj":""},{"sort":"4","zb":"***","dw":"亿元","snbytbzz":"","sntbzz":"","bnzsmb":"","qys":"219","sbs":"219","sbl":"100.00000000","dysb":"27.2250000000000000","dytbzz":"0E-8","ljbysb":"151.9595000000000000","ljtbzz":"56.73991100","qbn":"2021","qby":"4","qbj":""},{"sort":"5","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"4.60978600","bnzsmb":"-","qys":"1161.00000000","sbs":"1161.00000000","sbl":"100.00000000","dysb":"163.76030000","dytbzz":"0.03571555","ljbysb":"699.18030000","ljtbzz":"34.01827300","qbn":"2021","qby":"4","qbj":""},{"sort":"6","zb":"***","dw":"万㎡","snbytbzz":"","sntbzz":"12.61391900","bnzsmb":"-","qys":"342","sbs":"342","sbl":"100.00000000","dysb":"87.00290000","dytbzz":"15.22036800","ljbysb":"315.06550000","ljtbzz":"26.61877600","qbn":"2021","qby":"4","qbj":""},{"sort":"7","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"13.89867100","bnzsmb":"-","qys":"1279.00000000","sbs":"1279.00000000","sbl":"100.00000000","dysb":"75.14312000","dytbzz":"-2.45535200","ljbysb":"321.57174000","ljtbzz":"19.96506800","qbn":"2021","qby":"4","qbj":""},{"sort":"8","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"19.53853400","bnzsmb":"-","qys":"423.00000000","sbs":"423.00000000","sbl":"100.00000000","dysb":"175.44510000","dytbzz":"11.41023100","ljbysb":"724.17486000","ljtbzz":"37.41511100","qbn":"2021","qby":"4","qbj":""},{"sort":"9","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"13.44333400","bnzsmb":"-","qys":"386.00000000","sbs":"386.00000000","sbl":"100.00000000","dysb":"73.83896000","dytbzz":"-6.74933900","ljbysb":"304.96924000","ljtbzz":"14.42368600","qbn":"2021","qby":"4","qbj":""},{"sort":"10","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"8.17382700","bnzsmb":"-","qys":"206.00000000","sbs":"206.00000000","sbl":"100.00000000","dysb":"1.95610000","dytbzz":"97.01273100","ljbysb":"6.52437000","ljtbzz":"88.62775600","qbn":"2021","qby":"4","qbj":""},{"sort":"11","zb":"**","dw":"亿元","snbytbzz":"","sntbzz":"-2.60807400","bnzsmb":"-","qys":"264.00000000","sbs":"264.00000000","sbl":"100.00000000","dysb":"2.31084000","dytbzz":"56.34065800","ljbysb":"8.82932000","ljtbzz":"100.43950300","qbn":"2018","qby":"4","qbj":""}],"fixedNum":1},"success":true}

总结

实用干货，不必考虑作者；如有需要，尽管打包带走。

基于vue通用模板渲染Table相关推荐

出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
控制富文本table不能超过div宽度_强悍！基于Vue的无渲染的富文本编辑器——tiptap！...
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
强悍！基于Vue的无渲染的富文本编辑器——tiptap！
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
javascript --- Vue初始化模板渲染
不带响应式的Vue缩减实现模板现有模板如下: <div id ="app"><div class="c1"><div titl ...
vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap 官网: github:https://github.com/ueberdosis/tiptap 演示:https://www.vue365.cn/code_demo.php?id=9 ...
php vue模板,探索 PHP 与 Vue 通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
php vue模板,探索PHP与Vue通用直出模板方案
测试方案,欢迎提出新的思路,共同探讨! 什么是"页面直出" 我们通常说的"页面直出",其实就是服务端渲染(SSR, Server-Side Render). 最 ...
Vue实例的属性及模板渲染
Vue实例的属性及模板渲染 1 概述 2 el:与DOM元素绑定 3 data:定义双向绑定的数据 4 computed:计算属性 5 methods:定义Vue实例的方法 6 Vue中的三种模板 6 ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...

基于vue通用模板渲染Table

文章目录

前言

一、需求分析

二、实施方案

1.方案解析

2.实例

总结

基于vue通用模板渲染Table相关推荐

最新文章

热门文章