如何使用元素UI和vue拆分单元格以匹配我的表数据

Question

我使用元素和vuejs将数据渲染到一个表中，需要合并单元格，并且不能更改数据结构。

我的数据如下：

data = [{
id: 1,
name: "online_hi_comed"
start_time: "2018-11-27 00:00:00",
status: 0,
infos: [{
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}, {
id: 1,
name: "online_hi_comed"
start_time: "2018-11-27 00:00:00",
status: 0,
infos: [{
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
item_id: "dsfdfs",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}]

期待这样的表格结果：

示例图片

Answer 1

var Main = {
data() {
return {
form: [{
id: 1,
name: "one_hi_comed",
time: "2018-11-27 00:00:00",
info: [{
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}, {
id: 1,
name: "online_hi_comed",
time: "2018-11-27 00:00:00",
info: [{
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}]
}
},
methods:{
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const arr = [4, 5, 6, 7] // 需要隐藏宽度的列的index
if(columnIndex === 3) {
return {
rowspan: 1,
colspan: 3
}
} else  if(arr.includes(columnIndex)){
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.el-table{
td.sub_row {
padding: 0;
border-bottom: none;
border-right: none;
&>.cell {
padding: 0;
}
}
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="form"
:span-method="objectSpanMethod"
border>
<el-table-column
prop="id"
label="id">
</el-table-column>
<el-table-column
prop="name"
label="name">
</el-table-column>
<el-table-column
prop="time"
label="time">
</el-table-column>
<el-table-column
prop="type"
class-name="sub_row"
label="type">
<template slot-scope="scope">
<el-table :data="scope.row.info" :show-header="false">
<el-table-column
prop="type">
</el-table-column>
<el-table-column
prop="msg">
</el-table-column>
<el-table-column
prop="img_url">
<template slot-scope="scope">
<img :src="scope.row.img_url">
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
prop="msg"
label="msg">
</el-table-column>
<el-table-column
prop="img_url"
label="img">
</el-table-column>
</el-table>
</template>
</div>

我已经解决了，这是一个例子。jsfiddl 中的示例

代码如下：

<template>
<div>
<el-table
:data="form"
:span-method="objectSpanMethod"
border>
<el-table-column
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name">
</el-table-column>
<el-table-column
prop="time"
label="time">
</el-table-column>
<el-table-column
prop="info"
class-name="sub_row"
label="info">
<template slot-scope="scope">
<el-table :data="scope.row.info" :show-header="false">
<el-table-column
prop="type">
</el-table-column>
<el-table-column
prop="msg">
</el-table-column>
<el-table-column
prop="img_url">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
prop="type"
label="type">
</el-table-column>
<el-table-column
prop="msg"
label="msg">
</el-table-column>
<el-table-column
prop="img_url"
label="img">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
form: [{
id: 1,
name: "one_hi_comed",
time: "2018-11-27 00:00:00",
info: [{
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}, {
id: 1,
name: "online_hi_comed",
time: "2018-11-27 00:00:00",
info: [{
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}, {
type: "32",
id: 33,
msg: "hello",
img_url: "http://sdfsdfsf.png"
}]
}]
};
},
methods:{
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const arr = [4, 5, 6] // 需要隐藏宽度的列的index
if(columnIndex === 3) {
return {
rowspan: 1,
colspan: 3
}
} else  if(arr.includes(columnIndex)){
return {
rowspan: 0,
colspan: 0
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table{
td.sub_row {
padding: 0;
border-bottom: none;
border-right: none;
&>.cell {
padding: 0;
}
}
}
</style>

解决这个问题的方法是首先合并单元格，然后在表列中使用需要拆分为某些行的表。