vue element ui复杂表头，复杂表格
Posted qaakd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue element ui复杂表头，复杂表格相关的知识，希望对你有一定的参考价值。
效果图：
<template>
<div>
<el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%; margin-top: 20px"
:header-cell-style="headerStyle">
<el-table-column prop="id" label="123" ref="pj" colspan="2" align="center">
</el-table-column>
<el-table-column>
<el-table-column prop="f1"> </el-table-column>
<el-table-column prop="f2"> </el-table-column>
</el-table-column>
<el-table-column prop="rrr" label="444" align="center"> </el-table-column>
<el-table-column prop="amount1" label="555" align="center">
<el-table-column prop="amount1" label="666" align="center">
<el-table-column prop="amount1" label="77" align="center">
</el-table-column>
<el-table-column prop="amount1" label="88" align="center">
</el-table-column>
</el-table-column>
<el-table-column prop="amount1" label="99" align="center">
<el-table-column prop="amount1" label="1111" align="center">
</el-table-column>
<el-table-column prop="amount1" label="222" align="center">
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column prop="amount3" label="cccc" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tableData: [
{
f1: "xxxxxx",
id: "qqqqq",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
f1: "sssss",
id: "",
name: "王小虎",
amount1: "165",
amount2: "4.43",
amount3: 12,
},
{
f1: "dddddddddd",
id: "",
name: "王小虎",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
f1: "rrrrrrr",
f2: "ddddd",
id: "",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "",
f2: "fffffffffff",
name: "cccccccccccc",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f2: "22222222",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "rrrrrrr",
name: "mmmmmm",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
f1: "xxxxxxx",
id: "ggggggg",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f1: "nnnnnnnn",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f1: "vvvvvvvvvv",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f1: "ggg",
f2: "bbbb",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f2: "hhhhhh",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "",
f2: "tttttttt",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
};
},
methods: {
headerStyle({ column, rowIndex, columnIndex }) {
if (rowIndex === 1 && columnIndex === 0) {
return { display: "none" };
}
if (rowIndex === 1 && columnIndex === 1) {
return { display: "none" };
}
if (rowIndex === 0 && columnIndex === 1) {
return { display: "none" };
}
if (rowIndex === 0 && columnIndex === 0) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("colSpan", 3);
});
}
},
arraySpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return [6, 1];
}
else if (rowIndex === 6) {
return [1, 3];
}
else if (rowIndex === 7) {
return [6, 1];
}
else {
return [0, 0];
}
}
if (columnIndex === 1) {
if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2) {
return [1, 2];
} else if (rowIndex === 3) {
return [3, 1];
} else if (rowIndex === 7 || rowIndex === 8 || rowIndex === 9) {
return [1, 2];
} else if (rowIndex === 10) {
return [3, 1];
} else {
return [0, 0];
}
} else if (columnIndex === 2) {
if (
rowIndex === 0 ||
rowIndex === 1 ||
rowIndex === 2 ||
rowIndex === 6 ||
rowIndex === 7 ||
rowIndex === 8 ||
rowIndex === 9
) {
return [0, 0];
} else {
return [1, 1];
}
}
},
},
};
</script>
以上是关于vue element ui复杂表头，复杂表格的主要内容，如果未能解决你的问题，请参考以下文章