el-table表头插入图标,并添加tooltip

直接上代码哈:

<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>是这一列的值

猜你喜欢

转载自blog.csdn.net/tt18473481961/article/details/89477665