我有一个使用 Element UI 的代码库（它为什么存在？）而且我需要为每个显示的项目设置一个双行。我需要我的布局看起来像这样......
R1 | col1 | col2 | col3 |
| col4 |
R2 | col1 | col2 | col3 |
| col4 |
当我在文档 ( http://element.eleme.io/#/en-US/component/table )中看不到 el-table-row 元素时，如何在 Element UI 中执行此操作
此外，我已经看到他们使用 arraySpanMethod 和 objectSpanMethod 的示例，但我不明白如何获得我想要的结果。
感谢您的时间。
以下是您可以使用以下方法执行此操作的方法span-method：
<template>
<div id="app">
<el-table
:data="tableData6"
:span-method="spanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="row" label="Row" width="180"> </el-table-column>
<el-table-column prop="col1" label="Column 1"> </el-table-column>
<el-table-column prop="col2" label="Column 2"> </el-table-column>
<el-table-column prop="col3" label="Column 3"> </el-table-column>
</el-table>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
data: function() {
return {
rows: ["R1", "R2"],
tableData6: [
{
row: "R1",
col1: "col1",
col2: "col2",
col3: "col3"
},
{
row: "R1a",
name: "Tom",
col1: "col4"
},
{
row: "R2",
col1: "col1",
col2: "col2",
col3: "col3"
},
{
row: "R2a",
col1: "col4"
}
]
};
},
components: {
HelloWorld
},
methods: {
spanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return [2, 1];
}
return [0, 0];
}
if (rowIndex % 2 === 0) {
return [1, 1];
}
if (columnIndex === 1) {
return [1, 3];
}
return [0, 0];
}
}
};
</script>
https://codesandbox.io/s/6xn4y5321k
如果您绝对不需要为此使用表格，则可以使用<el-row>and <el-col>：
<template>
<div id="app">
<el-row v-for="row in rows" :key="row">
<el-col :span="6">{{ row }}</el-col>
<el-col :span="18">
<el-row>
<el-col :span="6"> col1 </el-col>
<el-col :span="6"> col2 </el-col>
<el-col :span="6"> col3 </el-col>
</el-row>
<el-row> <el-col :span="18"> col4 </el-col> </el-row>
</el-col>
</el-row>
</div>
</template>