console
var Main = {
data() {
return {
tableData: [{
'0': '00',
'1': '01',
'2': '02',
'3': '03',
'4': '04',
}, {
'0': '10',
'1': '11',
'2': '12',
'3': '13',
'4': '14',
}, {
'0': '20',
'1': '21',
'2': '22',
'3': '23',
'4': '24',
}, {
'0': '30',
'1': '31',
'2': '32',
'3': '33',
'4': '34',
}, {
'0': '40',
'1': '41',
'2': '42',
'3': '43',
'4': '44',
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex===1&&columnIndex === 1) {
return [3, 3];
}
},
formmart(data,columnIndex){
let {row}=data;
return row[columnIndex]
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
<div>
<el-table
:show-header="false"
:data="tableData"
:span-method="arraySpanMethod"
row-class-name="row-class-my"
cell-class-name="cell-class-my"
border
style="width: 100%">
<el-table-column >
<template slot-scope="scope">
<div class="s-bgcl-white">
<i class="el-icon-time"></i>
{{ formmart(scope,0) }}
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="s-bgcl-white">
<i class="el-icon-time"></i>
{{ formmart(scope,1) }}
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="s-bgcl-white">
<i class="el-icon-time"></i>
{{ formmart(scope,2) }}
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="s-bgcl-white">
<i class="el-icon-time"></i>
{{ formmart(scope,3) }}
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="s-bgcl-white">
<i class="el-icon-time"></i>
{{ formmart(scope,4) }}
</template>
</el-table-column>
</el-table>
</div>
</template>
</div>
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
.cell-class-my {
height:180px;
padding:0 !important;
}
.cell-class-my .cell{
height:100%;
padding:0 !important;
background-color:gold ;
}
.s-bgcl-white{
height: 100%;
}