elementui表格中toolip组件文字提示使用-cmdb功能优化

最近想到cmdb需求我们在表格中鼠标移动到ip上,能够得到ip的环境箭头类型提示。展示更加友好,文字可以自定义。
通常我们查看表格得内容时候,希望鼠标移动到我们看的数据时候能有个小小得文字提示,帮助我们了解更多表格信息。通过查阅文档
elementui中的el-tooltip 就是文字提示得组件。话不多说。直接上效果
效果图展示
在这里插入图片描述

element toolip 组件说明
展示下代码
content=“环境类型为:${data.type}” 就是ui上的文字提示的文字。

<el-table-column prop="iplist" label='ip' sortable min-width="90%">
             <template slot-scope="scope">
              <el-tooltip
            placement="top"
            :key="index"
            v-for="(data,index) in scope.row.iplist"
            :content="`环境类型为:${data.type}`"
            effect="dark"
          >
            <el-tag
            :key="index"
            :type="data.type ==='a' ? 'primary' : (data.type==='b'?'danger':'success')"
            disable-transitions>{{data.ip}} </el-tag>

              </el-tooltip>

      </template>
          </el-table-column>

三元表达式。适合多个条件判断。

:type="data.type ==='a' ? 'primary' : (data.type==='b'?'danger':'success')"
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值