- 版本
“element-ui”: “^2.15.5”, - 需求:鼠标悬浮到该列表头,显示提示框
- 代码
<el-table
:data="xxxx"
>
<el-table-column label="序号" width="40" type="index" />
<el-table-column
v-for="(item) in xx2"
:key="item.prop"
:prop="item.prop"
:label="item.lable"
>
// 表身插槽
<template slot-scope="scope">
<div
v-if="scope.column.label !== 'xxx'">
{{scope.row[scope.column.property] ? scope.row[scope.column.property] : '无'}}
</div>
<div v-else>
<el-switch
v-if="scope.column.label === '是否入伍'"
v-model="scope.row[scope.column.property]"
@change="changeSwitch(scope.column,scope.row,scope.$index)"
active-text="是"
inactive-text="否"
active-value=1
inactive-value=0
>
</el-switch>
</div>
</template>
// 表头插槽+弹出提示框
<template slot="header" slot-scope="scope">
<span v-if="item.prop!='xxA'">{{ scope.column.label }}</span>
// prop等于xxA 的有提示框
<el-tooltip v-else effect="dark" content="你想提示的弹框信息字段" placement="top">
<span>{{ scope.column.label }}</span>
</el-tooltip>
</template>
// 表身某一鼠标移入弹出提示框 重要的属性popper-class加类名 这个类的定义要另写一个单独的style里
<template slot-scope="scope">
<el-tooltip effect="light" placement="right-start" popper-class="wh-slot">
<span>{{ scope.row.Name }}</span>
<div slot="content">
<p class="wh-slot-title">信息</p>
<p class="wh-slot-li"><span>所在班级:</span><span>{{ scope.row.xx}}</span></p>
<p class="wh-slot-li"><span>班主任:</span><span>{{ scope.row.nameB }}</span></p>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
// css
<style>
.wh-slot .wh-slot-title{
text-align:center;
}
.wh-slot-li>span:nth-child(1){
display: inline-block;
width: 80px;
text-align: right;
}
.wh-slot-li>span:nth-child(2){
display: inline-block;
width: 80px;
/* text-align: right; */
}
</style>
文章来源地址https://www.toymoban.com/news/detail-731127.html
文章来源:https://www.toymoban.com/news/detail-731127.html
到了这里,关于element ui-表头自定义提示框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!