欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

相关标签: element