模板内容:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column :label="str" width="180" :render-header="renderheader">
<template scope="scope">
<p>姓名: {{scope.row.date}}</p>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column label="地址">
</el-table-column>
</el-table>
</template>
js内容:
data() {
return {
str:"日期",
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '<span>上海市普陀区金沙江路 1518 弄</span>'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods:{
renderheader(h, { column, $index }) {
return h('span', {},["你好",
h('b', {"class":"aa"},[column.label]),
"哈哈"
])
通过render方法重新渲染,加入指定内容,template内是渲染表格内部的值