有时候你想简单粗暴点,但事实总有不尽人意。。。
很多时候我们的数据应需求都需要以表格的形式去展示,还有增删改查等等的操作,我的项目是vue+element,所以废话不多说,直接上代码:
<el-table
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
:row-style="rowClass">
<el-table-column prop="deleteMsg" :render-header="renderHeader">
<template slot-scope="scope">
<a href="javascript:void(0)" @click="alertMsgDia(scope.$index,scope.row)">
<div class="tabTdSty">
<div>{{scope.row.deleteMsg}}</div>
<div><i class="iconfont icon-shijian2"></i> {{scope.row.date}}</div>
</div>
</a>
</template>
</el-table-column>
</el-table>
那么究竟怎么定义,怎么渲染,下面的代码才是重中之重:
renderHeader(h, { column, $index }) {
h("span", { class: { curSty: true } }, [
h("span", { on: { click: this.onClickPop } }, "标记已读")
]);
}
最后再唠叨一句,解释下这串代码,参数h呢是createElement的意思,相信这么解释就能明白什么意思了吧,这窜代码呢是通过渲染函数来实现渲染,希望看了本篇文章对你有帮助!有什么意见也可以留言与我交流!