vue中使用iview table组件完成列合并
使用技术vue2 iview html css
使用工具:HBuilder X
实现功能:将拥有相同父元素名称合并,实现多个子元素在一个父名称下展示
外部引入:
vue:vue.js引入
iview:cssiview css 引入
iview:js iview.js引入
功能效果
核心代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iview</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="https://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<style type="text/css">
.container{
min-width:800px;
width: 1000px;
height: 500px;
margin: 80px auto;
border: 1px solid antiquewhite;
}
</style>
<body>
<!-- :span-method="handleSpan" -->
<div id="app">
<div class="container">
<i-table :columns="columns14" :data="product" border :span-method="handleSpan"></i-table>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
//定义一个新变量存储处理过后的信息
product:[],
//存储数组对象的数量
countNum:[],
responseDate:[
{groupName:'教育',product:[{
id:'1',
name:'test2',
groupName:'教育',
releaseNum:1,
keyVersion:"版本1"
},
{
id:'1',
name:'test3',
groupName:'教育',
releaseNum:2,
keyVersion:"版本1"
},
{
id:'1',
name:'test4',
groupName:'教育',
releaseNum:3,
keyVersion:"版本1"
},
{
id:'1',
name:'test5',
groupName:'教育',
releaseNum:4,
keyVersion:"版本1"
}
]},
{groupName:'医疗',product:[{
id:'2',
name:'test6',
groupName:'医疗',
releaseNum:1,
keyVersion:"版本2"
},
{
id:'2',
name:'test7',
groupName:'医疗',
releaseNum:2,
keyVersion:"版本2"
},
]},
{groupName:'网络',product:[{
id:'3',
name:'test8',
groupName:'2G网',
releaseNum:1,
keyVersion:"版本3"
},
{
id:'3',
name:'test9',
groupName:'3G网',
releaseNum:2,
keyVersion:"版本3"
},
{
id:'3',
name:'test10',
groupName:'4G网',
releaseNum:2,
keyVersion:"版本3"
},
{
id:'3',
name:'test11',
groupName:'5G网',
releaseNum:2,
keyVersion:"版本3"
},
]},
{groupName:'校园',product:[{
id:'4',
name:'test12',
groupName:'北京大学',
releaseNum:1,
keyVersion:"版本4"
},
{
id:'4',
name:'test13',
groupName:'清华大学',
releaseNum:2,
keyVersion:"版本4"
},
{
id:'4',
name:'test14',
groupName:'复旦大学',
releaseNum:2,
keyVersion:"版本4"
},
]},
{groupName:'上班',product:[{
id:'5',
name:'test15',
groupName:'武汉大学',
releaseNum:1,
keyVersion:"版本5"
},
]},
],
columns14:[
{
title: 'kind',
key: 'education'
},{
title: 'publish',
key: 'publish'
},
{
title: 'name',
key: 'name'
},
{
title: 'id',
key: 'id'
}],
data5:[
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}],
},
mounted() {
this.init()
},
created() {
console.log('所有事件初始化时触发！')
},
methods: {
//iview自带处理table表的行列
//具体见https://www.iviewui.com/components/table#H/LHB
handleSpan({ row, column, rowIndex, columnIndex })
{
if(columnIndex===0)
{
if(row.rowSpan>=1)
{
return [row.rowSpan,1]
// {
// rowspan:row.rowSpan,
// colspan:1
//
// }
}
else
{
return [0,0]
}
}
},
init()
{
let data=this.responseDate;
for(const index in data)
{
for( const v of data[index].product)
{
let param={
id:v.id,
publish:v.keyVersion,
name:v.name,
age:v.id,
education:v.groupName
}
this.product.push(param)
}
}
// console.log(this.product,'this.product')
//遍历数组对象,判断其product对应的数据长度
for(const index in data)
{
this.countNum.push({
name:data[index].groupName,
num:data[index].product.length
})
}
//创建一个普通变量存储要合并product列的下标
let currentArray=[0]
let msgIndex=0
for(let index in this.countNum)
{
let num=this.countNum[index].num;
msgIndex +=num;
currentArray.push(msgIndex)
}
//给product对应下标的对象赋值rowspan属性
for(let index in this.countNum)
{
this.product[currentArray[index]].rowSpan=this.countNum[index].num
}
console.log(this.product,'this.product')
}
}
})
</script>
</body>
</html>