需求:
- 根据后台返回数据渲染到表格:数据可能是一段html代码, 要对其进行渲染处理成html到dom上
- 后台返回的数据结构是:如下
表头跟Tbody的数据格式 是一样的
比如:TableTitle:[{no:'数量',no2:规格',no3:'颜色',no4:'价格'}],
则 TableData:[
{no:1,no2:'1x2',no3:'黑色',no4:4},
{no:1,no2:'2x1',no3:'红色',no4:4}
]
productionSchedule .vue 文件
<template>
<el-table
ref="singleTable"
:data="tableData"
height="90vh"
style="min-width:100%"
>
<template
v-for="(item,key,index) in tableTitle">
<el-table-column
:property="key"
:label="item"
width="120"
:render-header="renderHeader"
>
<template slot-scope="scope">
<!--方法一:渲染列表-->
<!-- <template v-for="(item2,key2,index2) of scope.row">
<span v-if="key2==key" v-html="item2"></span>
</template>-->
<!--方法二:-->
<span v-html="tableData[scope.$index][key]"></span>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: "productionSchedule",
data() {
return {
tilte:'生产计划进度表',
tableTitle:[],
tableData:[],
}
},
mounted(){
//this.getData();
},
methods: {
// render 事件>>>>>其实实现原理 是根据vue中的render函数来实现>>>渲染表头
renderHeader(h,{column}) { // h即为cerateElement的简写,具体可看vue官方文档
return h(
'span',
{domProps: { //此方法可渲染html代码column.label==='红色<br/>'
innerHTML: `${column.label}`
},},
[],);
},
}
}
</script>