<template>
<el-table
:span-method="objectSpanMethod"
:cell-class-name="tableCellClassName"
:row-class-name="tableRowClassName"
:data="tableData"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
label="Name"
prop="name">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
type:0
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
type:0
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
type:1
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
type:2
}],
search: ''
}
},
methods: {
tableRowClassName(row){
if (row.row.type==1) {
return 'red';
}
return '';
},
tableCellClassName(row,index){
if (row.columnIndex==1){
return 'red1';
}},
getListDataForRowAndColumn(data){
let self = this;
self.rowAndColumn = [];
self.rowRoomColumn = [];
for (var i = 0; i < data.length; i++) {
if (i === 0) {
self.rowAndColumn.push(1);
self.pos = 0;
self.rowRoomColumn.push(1);
self.posT = 0;
} else {
if (data[i].type === data[i - 1].type) {
self.rowAndColumn[self.pos] += 1
self.rowAndColumn.push(0)
if (data[i].key === data[i - 1].type) {
self.rowRoomColumn[self.posT] += 1
self.rowRoomColumn.push(0)
} else {
self.rowRoomColumn.push(1)
self.posT = i
}
} else {
self.rowAndColumn.push(1)
self.pos = i;
self.rowRoomColumn.push(1)
self.posT = i
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let self = this
if (columnIndex ===1||columnIndex ===0||columnIndex ===9) {
if (self.rowAndColumn[rowIndex]) {
let rowNum = self.rowAndColumn[rowIndex];
return {
rowspan: rowNum,
colspan: rowNum > 0 ? 1 : 0
}
}
return {
rowspan: 0,
colspan: 0
}
}
},
},
}
</script>