微信小程序怎么_Vue Elenent完成表格相同数据列合并

  • 栏目:公司新闻 时间:2021-01-04 17:49 分享新闻到:
<返回列表

Vue Elenent实现表格相同数据列合并       这篇文章主要为大家详细介绍了Vue Elenent实现表格相同数据列合并,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下

思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并。(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰。)

template:

 el-table
 :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性
 

Js:

data(){
return{
 orderdata:null,// 后端将数据查询出来后,绑定到orderdata里面
 methods: {
flitterData4(){
 let spanOneArr = []
 let concatOne = 0
 //let spanOneArr1 = []
 //let concatOne1 = 0
 this.orderdata.forEach((item,index)= {//循环后端查询出来的数据(orderdata)
 if(index === 0){
 spanOneArr.push(1)
 }else{
 //name 修改
 if(item.ENTERNAME === this.orderdata[index - 1].ENTERNAME){ //第一列需合并相同内容的字段
 spanOneArr[concatOne] += 1
 spanOneArr.push(0)
 }else{
 spanOneArr.push(1)
 concatOne = index
 //if(item.coachName === this.coachdata[index - 1].coachName){ //第二列需合并相同内容的判断条件
 //spanOneArr1[concatOne1] += 1
 //spanOneArr1.push(0)
 //}else{
 //spanOneArr1.push(1)
 //concatOne1 = index
 // }
 return {
 one: spanOneArr,
 //two:spanOneArr1
 objectSpanMethod4({row, column, rowIndex, columnIndex}){
 if(columnIndex === 0 ) {
 // this.tableData 修改
 const _row = (this.flitterData4(this.tableData).one)[rowIndex]
 const _col = _row 0 1 : 0
 return {
 rowspan: _row,
 colspan: _col
 //判断是否是第二列,如果是就将第二列相同字段进行合并
 //if(columnIndex === 1) {
 // const _row = (this.flitterData(this.tableData).two)[rowIndex]
 // const _col = _row 0 1 : 0
 // return {
 // rowspan: _row,
 // colspan: _col
 // }
 }

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

微信小程序怎么_Vue Elenent完成表格相同数

公司新闻 2021-01-04
Vue Elenent完成报表同样数据信息列合拼 本文关键为大伙儿详尽详细介绍了Vue Elenent完成报...
查看全文

独立版微信小程序商城-西安企业网站建设

公司新闻 2021-01-04
许多人到在网上检索西安市企业网站建设哪个好、西安市企业网站建设企业价格、建立网站是...
查看全文

广州凡科互联网科技股份有限公司招聘娱

公司新闻 2021-01-03
招聘人数:9职位信息【工作内容】1、正规平台绿色直播,面试无任何费用无押金,审核通过即...
查看全文
返回全部新闻


区域站点: 南丰县微信h5小游戏   南宫市手机软件制作教程   囊谦县手机网站自助建站   南和县h5小游戏制作平台   南华县微信h5小游戏   南江县手机软件制作教程   南京市手机网站自助建站   南靖县h5小游戏制作平台   南康市微信h5小游戏   南乐县手机软件制作教程   南陵县手机网站自助建站   南宁市h5小游戏制作平台   南平市微信h5小游戏   南皮县手机软件制作教程   南市区手机网站自助建站   南通市h5小游戏制作平台   南投县微信h5小游戏   南雄市手机软件制作教程   南溪县手机网站自助建站   南阳市h5小游戏制作平台   南漳县微信h5小游戏   南召县手机软件制作教程   南郑县手机网站自助建站   那坡县h5小游戏制作平台   那曲县微信h5小游戏   纳雍县手机软件制作教程   讷河市手机网站自助建站   内黄县h5小游戏制作平台   内江市微信h5小游戏   内丘县手机软件制作教程   内乡县手机网站自助建站   嫩江市h5小游戏制作平台   聂荣县微信h5小游戏   尼玛县手机软件制作教程   尼木县手机网站自助建站   宁安市h5小游戏制作平台   宁波市微信h5小游戏   宁城县手机软件制作教程   宁德市手机网站自助建站   宁都县h5小游戏制作平台   宁国市微信h5小游戏   宁海县手机软件制作教程   宁化县手机网站自助建站   宁晋县h5小游戏制作平台   宁陵县微信h5小游戏   宁明县手机软件制作教程   宁南县手机网站自助建站   宁强县h5小游戏制作平台   宁陕县微信h5小游戏   宁武县手机软件制作教程   宁乡市手机网站自助建站   宁阳县h5小游戏制作平台   宁远县微信h5小游戏   农安县手机软件制作教程   磐安县手机网站自助建站   盘锦市h5小游戏制作平台   盘山县微信h5小游戏   磐石市手机软件制作教程   盘州市手机网站自助建站   蓬安县h5小游戏制作平台   澎湖县微信h5小游戏   蓬莱市手机软件制作教程   彭山县手机网站自助建站   蓬溪县h5小游戏制作平台   彭阳县微信h5小游戏   彭泽县手机软件制作教程   彭州市手机网站自助建站   偏关县h5小游戏制作平台   平安县微信h5小游戏   平昌县手机软件制作教程   平定县手机网站自助建站   屏东县h5小游戏制作平台   平度市微信h5小游戏   平果县手机软件制作教程   平和县手机网站自助建站   平湖市h5小游戏制作平台   平江县微信h5小游戏   平乐县手机软件制作教程   平凉市手机网站自助建站   平利县h5小游戏制作平台   平罗县微信h5小游戏   平陆县手机软件制作教程   屏南县手机网站自助建站   平泉市h5小游戏制作平台   屏山县微信h5小游戏   平顺县手机软件制作教程   平塘县手机网站自助建站   平潭县h5小游戏制作平台   平武县微信h5小游戏   萍乡市手机软件制作教程   平乡县手机网站自助建站   平阳县h5小游戏制作平台   平遥县微信h5小游戏   平阴县手机软件制作教程   平邑县手机网站自助建站   平远县h5小游戏制作平台   平舆县微信h5小游戏   皮山县手机软件制作教程   普安县手机网站自助建站   浦北县h5小游戏制作平台   浦城县微信h5小游戏   普洱市手机软件制作教程   普格县手机网站自助建站   浦江县h5小游戏制作平台   普兰县微信h5小游戏   普宁市手机软件制作教程   莆田市手机网站自助建站   迁安市h5小游戏制作平台   乾安县微信h5小游戏   潜江市手机软件制作教程   潜山市手机网站自助建站  

友情链接: 免费建站的平台 网页设计自我介绍 自助建站 搭建网站基本步骤

Copyright © 2002-2020 手机网站自助建站_h5小游戏制作平台_微信h5小游戏_手机软件制作教程_抽奖h5 版权所有 (网站地图) 备案号:粤ICP备10235580号