方法一

---

el-table动态生成表头 ，百度了一下 然后自己写了个小例子   ，一共三个页面 ，可直接使用

1.index-tabletext.vue

---

<template>

<div>

<index-tabletext1 :thtable="thtable"

:datalist="datalist">

</index-tabletext1>

</div>

</template>

<script>

import indexTabletext1 from './index-tabletext1'

export default {

components: {

indexTabletext1

},

data() {

return {

thtable: [

{

prop: 'date',

label: '日期'

},

{

label: '配送信息',

children: [

{

prop: 'name',

label: '姓名'

},

{

label: '地址',

children: [

{

prop: 'province',

label: '省份'

},

{

prop: 'city',

label: '市区'

},

{

prop: 'address',

label: '地址'

}

]

}

]

}

],

datalist: [

{

date: '2016-05-03',

name: '王小虎',

province: '上海',

city: '普陀区',

address: '上海市普陀区金沙江路 1518 弄',

},

{

date: '2016-05-02',

name: '王小虎',

province: '上海',

city: '普陀区',

address: '上海市普陀区金沙江路 1518 弄',

}

]

}

}

}

</script>

<style>

</style>

 

2.index-tabletext1.vue

---

<template>

<div>

<el-table :data="datalist">

<index-tabletext2 v-for="(item,index) in thtable" :key="index" :thtable="item"></index-tabletext2>

</el-table>

</div>

</template>

<script>

import indexTabletext2 from './index-tabletext2'

export default {

components: {

indexTabletext2

},

props:["thtable","datalist"]

}

</script>

<style scoped>

</style>

 

 

3.index-tabletext2.vue

---

<template>

<el-table-column :prop="thtable.prop"

:label="thtable.label"

align="left">

<template v-if="thtable.children">

<my-column v-for="(item, index) in thtable.children"

:key="index"

:thtable="item"></my-column>

</template>

</el-table-column>

</template>

<script>

export default {

name: 'MyColumn',

props:["thtable"]

}

</script>

<style scoped>

</style>

 

 

方法2

感觉挺麻烦的 

 

---

<template>

<div>

<el-table

class="whiteSpacetable"

:span-method="spanMethod"

:data="datalist"

:row-class-name="tableRowClassName"

>

<el-table-column v-for="(item,index) in thtable" :label="item.label" :key="index">

<el-table-column

:v-if="item.children||item.children.length>0"

v-for="(item1,index1) in item.children"

:label="item1.label"

:prop="item1.prop"

:key="index1"

>

<template slot-scope="scope">

<div v-if="scope.row.takecare === '1'&&item1.prop=='date'">

<span>

<span style="font-weight:bold;">注：</span>

<span>1、评委会应当就所有评审项进行评审。</span>

</span>

<div style="margin-left:32px;">2、表中各项审查内容只需填写“√”或“×” 。</div>

<div style="margin-left:32px;">3、在结论栏中填写“合格”或“不合格”。</div>

</div>

<div v-else> {{scope.row[item1.prop]}}</div>

</template>

 

<el-table-column

:v-if="item1.children||item1.children.length>0"

v-for="(item2,index2) in item1.children"

:label="item2.label"

:prop="item2.prop"

:key="index2"

>

<el-table-column

:v-if="item2.children||item2.children.length>0"

v-for="(item3,index3) in item2.children"

:label="item3.label"

:prop="item3.prop"

:key="index3"

></el-table-column>

</el-table-column>

</el-table-column>

</el-table-column>

</el-table>

<div>

</template>

<script>

export default {

data() {

return {

thtable: [

{

label: "3435",

children: [

{

prop: "date",

label: "3435"

},

{

prop: "explain",

label: "3435"

},

{

label: "3435",

children: [

{

label: "3435",

children: [

{

label:

"3435",

prop: "scored1"

}

]

},

{

label: "3435",

children: [

{

label: "3435",

prop: "scored2"

}

]

},

{

label: "3435",

children: [

{

label: "3435",

prop: "scored3"

}

]

},

{

label: "3435",

children: [

{

label: "3435",

prop: "scored4"

}

]

}

]

},

{

label: "3435",

children: [

{

label: "3435",

children: [

{

prop: "scored5",

label: "3435"

}

]

}

]

},

{

label: "3435",

children: [

{

label: "3435",

children: [

{

prop: "scored6",

label:

"3435"

}

]

}

]

},

{

prop: "qualified",

label: "3435）"

}

]

}

],

 

datalist: [

{

date: "xxxxx",

explain: "3435",

qualified: "不合格",

rowspan: 1,

colspan: 1,

content: "√",

takecare:"",

style: {

textalign: "",

fontweight: ""

}

},

{

date: "xxxxx",

explain: "",

qualified: "3435",

rowspan: 1,

colspan: 1,

content: "√",

takecare:"",

style: {

textalign: "",

fontweight: ""

}

},

{

date: "xxxxx",

explain: "",

qualified: "",

rowspan: 1,

colspan: 1,

content: "",

takecare:"",

style: {

textalign: "",

fontweight: ""

}

},

{

date: "xxxxx",

explain: "",

qualified: "",

rowspan: 1,

colspan: 1,

takecare:"",

content: "",

style: {

textalign: "",

fontweight: ""

}

},

{

date: "xxxxx",

explain: "",

qualified: "",

rowspan: 1,

colspan: 1,

content: "",

takecare:"",

style: {

textalign: "",

fontweight: ""

}

},

{

date: "3435",

explain: "",

qualified: "",

rowspan: 1,

colspan: 8,

takecare:"",

content: "",

style: {

textalign: "",

fontweight: "bold"

}

},

{

date: "3435",

explain: "",

qualified: "",

rowspan: 1,

colspan: 8,

content: "",

takecare:"",

style: {

textalign: "",

fontweight: "bold"

}

},

{

date:

"注：1、12。 \n " +

"\v\v\v\v\v\v2、56 。\n " +

"\v\v\v\v\v\v3、78。",

 

explain: "",

qualified: "",

rowspan: 1,

colspan: 9,

takecare:"1",

content: "",

style: {

textalign: "left",

fontweight: ""

}

},

{

date: "324",

explain: "",

qualified: "",

rowspan: 1,

colspan: 9,

content: "",

style: {

textalign: "left",

fontweight: ""

}

},

{

date: "日期：\v\v\v\v\v\v年 \v\v\v\v\v\v月 \v\v\v\v\v\v 日",

explain: "",

qualified: "",

rowspan: 1,

colspan: 9,

content: "",

style: {

textalign: "left",

fontweight: ""

}

}

],

fileList: [],

dataForm: {}

};

},

methods: {

spanMethod({ row, column, rowIndex, columnIndex }) {

return [row.rowspan, row.colspan];

}

}

};

</script>

<style>

.auxili-tablestyles {

margin: 20px;

padding: 10px 70px;

box-sizing: border-box;

background-color: #f7f7f7;

}

.scored-titletexttable {

margin: 10px 0;

}

 

.upload-generatescore .el-upload {

width: 100%;

}

.generchoicefile {

display: block;

width: 100%;

}

.generupdate-but {

margin-top: 10px;

text-align: center;

}

</style>