<el-table :data="data" :span-method="objectSpanMethod" border class="tableArea" style="width: 100%;">
<el-table-column label="id" prop="id" align="center"></el-table-column>
<el-table-column label="商品类别" prop="productType" align="center" width="200"></el-table-column>
<el-table-column label="商品数量" prop="amount" align="center"></el-table-column>
<el-table-column label="商品价格" prop="price" align="center"></el-table-column>
<el-table-column label="商品名称" prop="productName" width="200px" align="center"></el-table-column>
<el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column
<script>
export default {
data() {
return {
tableData: [
{
code: '33333333',
name: '张三',
money: '5000',
ftMoney: '333',
state: '已分摊'
}
],
data: [{
id: "201808300001",
productType: "纺织品",
amount: 20,
productName: "上衣",
price: "80",
updateTime: "2018-08-30",
},
{
id: "201808300002",
productType: "纺织品",
amount: 20,
productName: "裤子",
price: "76",
updateTime: "2018-08-31",
},
{
id: "201808300003",
productType: "皮制品",
amount: 100,
productName: "挎包",
price: "150",
updateTime: "2018-08-31",
},
{
id: "201808300004",
productType: "皮制品",
amount: 180,
productName: "鞋子",
price: "76",
updateTime: "2018-08-29",
},
{
id: "201808300005",
productType: "绸缎",
amount: 80,
productName: "旗袍",
price: "106",
updateTime: "2018-08-31",
},
{
id: "201808300006",
productType: "纺织品",
amount: 20,
productName: "短裙",
price: "36",
updateTime: "2018-08-30",
},
{
id: "201808300007",
productType: "纺织品",
amount: 80,
productName: "短袖",
price: "36",
updateTime: "2018-08-30",
},
{
id: "201808300008",
productType: "纺织品",
amount: 20,
productName: "短袖",
price: "36",
updateTime: "2018-08-30",
},
{
id: "201808300009",
productType: "皮制品",
amount: 20,
productName: "钱包",
price: "60",
updateTime: "2018-08-30",
},
{
id: "201808300011",
productType: "纺织品",
amount: 90,
productName: "手套",
price: "60",
updateTime: "2018-08-30",
},
{
id: "201808300012",
productType: "纺织品",
amount: 90,
productName: "袜子",
price: "36",
updateTime: "2018-08-30",
},
{
id: "201808300013",
productType: "饮料",
amount: 100,
productName: "雪碧",
price: "5",
updateTime: "2018-08-31",
},
{
id: "201808300013",
productType: "纺织品",
amount: 100,
productName: "风衣",
price: "50",
updateTime: "2018-08-31",
},],
spanArr: []
};
},
components: {
},
methods: {
getSpanArrFunc(data) {
this.spanArr = []
let pos
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
pos = 0
} else if (
data[i].productType &&
data[i].productType === data[i - 1].productType
) {
this.spanArr[pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
pos = i
}
}
},
//合并行
objectSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
console.log(_row, _col)
return {
// [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col,
}
}
},
},
created() {
},
mounted() {
this.getSpanArrFunc(this.data)
},
computed: {
},
watch: {
cart: {
handler(newV) {
},
deep: true,
immediate: true,
},
},
};
</script>