因为维护了element ui 1.3.7 版的项目,要自定义表头和提示使用 :render-header
效果:
代码:
<template>
<div class="promptMessage">
<el-tooltip effect="dark" placement="bottom">
<div slot="content">
<p v-for="item in messages" :key="item">
{
{item}}
</p>
</div>
<i class="el-icon-information" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
</el-tooltip>
</div>
</template>
<script>
// 自定义表头提示用法
// import promptMessage from 'components/common/promptMessage'
// Vue.component('promptMessage', promptMessage)
// <el-table-column prop="orderNo" label="示例" :render-header="renderHeader">
// </el-table-column>
// renderHeader (h,{column}) {
// return h(
// 'div',{
// style:'display:flex;margin:auto;'
// },
// [
// h('span', column.label),
// h('prompt-message', {
// props: {messages: ["提示信息"]}
// })
// ]
// );
// },
export default {
props: {
messages: {
type: Array,
default: ['暂无'],
}
}
};
</script>