直接上代码哈:
<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>是这一列的值