vue和并列element组件table和自定义table写法
1、element组件写的
<template>
<div id="tables">
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
<el-table-column prop="classify" label="分类" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="amount1" label="数值 1(元)">
</el-table-column>
<el-table-column prop="amount2" label="数值 2(元)">
</el-table-column>
<el-table-column prop="amount3" label="数值 3(元)">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Tables',
data() {
return {
// 也可以写{id: '12987122',classify: '第一大类',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}
tableData: [{
id: '12987122',
classify: '第一大类',// 这个是第一个,合并之后的四个,第六个开始重新合并分大类
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
classify: '第一大类',// 这里的classify可以写也可以不写,因为他是要合并的,所以只记录第一个大类,之后的大类都不会被计入
name: '王中虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王大虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王老虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王死虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '12987127',
classify: '第二大类',// 这个是第六个,前面五个已经合并了,第六个开始重新合并分大类
name: '王骨虎',
amount1: '539',
amount2: '4.1',
amount3: 99
}, {
id: '12987128',
name: '王灰虎',
amount1: '539',
amount2: '4.1',
amount3: 88
}],
merge:'5'
};
},
methods: {
objectSpanMethod({row,column,rowIndex,columnIndex}) {// 这里不用里他,element固定的写法
if (columnIndex === 0) {// 这里不用里他,这个是从下标0开心合并的,0代表第一列的合并,1代表第二列的合并,以此类推
if (rowIndex % this.merge === 0) {//每this.num(data里面的num)行,合并this.num行
return {
rowspan: this.merge,// 合并this.num(我data数据写的是5行)行
colspan: 1 // 这个是合并的列的个数,1代表一个合并(0下标合并),2代表两个合并(下标0和下标1)以此类推
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
</script>
<style>
</style>
2、自定义table
<template>
<div id="tabless">
<div class="t_demo">
<table border="1">
<thead>
<tr>
<th>分类</th>
<th>姓名</th>
<th>数值 1(元)</th>
<th>数值 2(元)</th>
<th>数值 3(元)</th>
<th>操作</th>
</tr>
</thead>
<!-- 第一次遍历data大数组下的内容 -->
<tbody v-for="item in tableData" :key="item.id">
<!-- 第二次遍历大数组下的小数组list -->
<tr v-for="(item1,index) in item.list" :key="item1.index">
<!-- 取大数组的第一个分类进行展示,然后合并第一个合并列 -->
<td v-if="!index" :rowspan="item.list.length">{{item.classify}}-{{item.id}}</td>
<td>{{item1.Name}}-{{item1.id}}</td>
<td>{{item1.amount1}}</td>
<td>{{item1.amount2}}</td>
<td>{{item1.amount3}}</td>
<td>
<button @click="del(item1.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'Tabless',
data(){
return{
tableData:[
{
classify:'分类',
id:1,
list:[
{id:11,Name:'王小虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
{id:12,Name:'王中虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
]
},
{
classify:'分类',
id:2,
list:[
{id:21,Name:'王小虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
{id:22,Name:'王中虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
{id:23,Name:'王老虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
{id:24,Name:'王死虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
]
}
]
}
},
methods:{
del(id){
this.tableData.forEach(item =>{
var index = item.list.findIndex(item1 =>{
if(item1.id == id){
item.list.splice(index,1)
return true
}
})
})
}
}
}
</script>
<style>
#tabless{
height: auto;
width: 100%;
margin: 0 auto;
}
.t_demo table {
border-collapse: separate;
border-spacing: 5px 5px;
margin: 0 auto;
}
</style>