VUE+element实现表格----（纵向，横向）合并，带JSON的demo，复制就可⽤
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<div id="app">
<el-form:model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamic-table" label-width="0">
<el-table
:data="dynamicValidateForm.domains"
:span-method="objectSpanMethod"
stripe
border
fit
size="mini"
>
<el-table-column label="主体" prop="NAME" width="60" align="center"></el-table-column>
<el-table-column label="⼀级指标" prop="SCORE" width="80" align="center"></el-table-column>
<el-table-column label="⼆级指标" prop="CONTENT" width="80" align="center"></el-table-column>
<el-table-column label="Q1" align="center">
<el-table-column prop="Jan" label="Jan" align="center" width="60"> </el-table-column>
<el-table-column prop="Feb" label="Feb" align="center" width="60"> </el-table-column>
<el-table-column prop="Mar" label="Mar" align="center" width="60"> </el-table-column>
</el-table-column>
<el-table-column label="Q2" align="center">
<el-table-column prop="Apr" label="Apr" align="center" width="60"> </el-table-column>
<el-table-column prop="May" label="May" align="center" width="60"> </el-table-column>
<el-table-column prop="Jun" label="Jun" align="center" width="60"> </el-table-column>
</el-table-column>
<el-table-column label="Q3" align="center">
<el-table-column prop="Jul" label="Jul" align="center" width="60"> </el-table-column>
<el-table-column prop="Aug" label="Aug" align="center" width="60"> </el-table-column>
<el-table-column prop="Sep" label="Sep" align="center" width="60"> </el-table-column>
</el-table-column>
<el-table-column label="Q4" align="center">
<el-table-column prop="Oct" label="Oct" align="center" width="60"> </el-table-column>
<el-table-column prop="Nov" label="Nov" align="center" width="60"> </el-table-column>
<el-table-column prop="Dec" label="Dec" align="center" width="60"> </el-table-column>
</el-table-column>
<el-table-column prop="nian" label="年度" align="center"></el-table-column>
<el-table-column prop="zong":label="'1-N⽉\n合计'" align="center" width="60"></el-table-column>
</el-table>
</el-form>
</div>
<script src="unpkg/vue/dist/vue.js"></script>
<script src="unpkg/element-ui/lib/index.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
list:[],
listLoading:true,
dynamicValidateForm:{
domains:[]
},
spanArr:[],// ⼀个空的数组，⽤于存放每⼀⾏记录的合并数
pos:0,// spanArr 的索引
contentSpanArr:[],
position:0,
tableData:[{
index:7,
NAME:'张三',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:8,
NAME:'张三',
SCORE:'期末在职',
CONTENT:'年初预计',
STANDARD:'3.1231232', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},{
index:9,
NAME:'张三',
element表格横向滚动条SCORE:'期末在职',
CONTENT:'最新预计',
STANDARD:'23eadas.2', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},{
index:20,
NAME:'张三',
SCORE:'期末在职',
CONTENT:'上年同期',
STANDARD:'23eadas.2', Jan:'1',
Feb:'2',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'},
{
index:16,
NAME:'张三',
SCORE:'净值',
CONTENT:'实际达成',
STANDARD:'3sfsf.2', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:15,
NAME:'张三',
SCORE:'净值',
CONTENT:'年初预计',
STANDARD:'3sfsf.2', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:11,
NAME:'张三',
SCORE:'净值',
CONTENT:'最新预计',
STANDARD:'3sfsf.2', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
nian:'2011',
zong:'2000'
},{
index:12,
NAME:'张三',
SCORE:'净值',
CONTENT:'上年同期',
STANDARD:'1111', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:17,
NAME:'张三',
SCORE:'⼊职',
CONTENT:'实际达成', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},{
index:47,
NAME:'张三',
SCORE:'⼊职',
CONTENT:'年初达成', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
},
{
index:27,
NAME:'李四',
SCORE:'期末在职',
CONTENT:'年初达成', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:28,
NAME:'李四',
SCORE:'期末在职',
CONTENT:'年初预计', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index:29,
NAME:'李四',
SCORE:'期末在职',
CONTENT:'最新预计', Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
]
发表评论