el-table表头插入图标,并添加tooltip
程序员文章站
2022-04-06 15:05:49
...
直接上代码哈:
<el-table-column label="状态" align="center" class-name="small-padding fixed-width">
<template slot="header">
<el-popover
ref="popover2"
placement="bottom"
width="100"
trigger="click"
content="状态:启用/禁用">
<span slot="reference">状态</span>
</el-popover>
</template>
<template slot-scope="scope">
<i v-if="scope.row.status==1" class="el-icon-success active-icon" @click="changeStatus(scope.row)" />
<i v-else class="el-icon-remove disable-icon" @click="changeStatus(scope.row)" />
</template>
</el-table-column>
解释:
<template slot="header">
<el-popover
ref="popover2"
placement="bottom"
width="100"
trigger="click"
content="状态:启用/禁用">
<span slot="reference">状态</span>
</el-popover>
</template>是设置表头名叫“状态”,并给它添加一个点击出现tooltip的效果
<template slot-scope="scope">
<i v-if="scope.row.status==1" class="el-icon-success active-icon" @click="changeStatus(scope.row)" />
<i v-else class="el-icon-remove disable-icon" @click="changeStatus(scope.row)" />
</template>是这一列的值
上一篇: python进阶练习之——反向输出II
下一篇: C语言实现多个字符从两端移动,向中间汇聚