element UI的header修改自定义内容
emer 发布于 2018-6-15 14:48 4801 次阅读
模板内容:
<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内是渲染表格内部的值