bootstrap-vue + boostrap4 + vue 实现table表格中根据每行不同数据实现不同tooltip提示

最新推荐文章于 2024-08-16 07:33:44 发布

Hey,Girl

最新推荐文章于 2024-08-16 07:33:44 发布

阅读量2k

点赞数

分类专栏： WEB前端文章标签： vue bootstrap js 前端 webpack

本文链接：https://blog.csdn.net/maryword/article/details/105594211

版权

WEB前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

目前遇到的问题：

领导要求table中需要按照数据的不同状态比如：已开通，未开通等，做出不同样式文字的提示。

已开通时候，圆点图标绿色，提示文字已开通；未开通，圆点图标灰色，提示文字未开通。

大概效果

看似简单的需求，发现用boostrapvue实现却变得困难，如何将每个td重新渲染成想要的样式效果提供的方式并不多。首先翻看其官方关于table这块的文档：

看来看去只能使用原生html标签，这就意味着bootstrapvue中 <b-xxx> 这类标签是无法渲染的，要命的是<b-coin>这种图标都没法用了，灰常不方便，于是渲染td中html时，只能暂时放弃bootstrapvue，转身投入bootstrap4怀抱中使用原始svg图标。

上面的显示图标之类问题解决后很快又掉了一个大坑里面，发现bootstrap4中的Tooltips没法用，oh my god! 于是开始各种捣腾给项目安装上popper,jquery，给大家看看package.json中相关的配置：

    "@popperjs/core": "^2.3.3",
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.7.0",
    "jquery": "^1.12.4",

先在main.js中引入以下文件：

import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min'
import 'bootstrap/dist/css/bootstrap.css'

在build/webpack.base.conf.js中：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common'),
    new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
    })
  ],......

然后项目中可以使用$(function(){})就算成功了。

接下来本来以为直接把 data-toggle="tooltip" data-placement="top" title="未开通" 这些直接放svg标签里面就万事大吉了:

data.content[i].html = '<svg data-toggle="tooltip" data-placement="top" title="未开通" viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dot b-icon bi text-danger"><g transform="translate(8 8) scale(2.5 2.5) translate(-8 -8)"><path fill-rule="evenodd" d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" clip-rule="evenodd"></path></g></svg>';

而事实证明还是太天真了。后头再仔细看bootstrap4官方文档，发现有这么一段：

意味着使用tooltip必须要初始化一下，而我们的数据是在created时候渲染调用方法，获取数据并渲染的。那么vue中如何让数据渲染完后再初始化tooltip呢?

后来查找资料找到了watch+nextTick的方法完美解决：

   data() {
      return { 
        fields: [.....],
        items: []
      }
    },
   watch:{
      items:function(){    
        this.$nextTick(function(){
          $('[data-toggle="tooltip"]').tooltip()
        });
      }
    },

终于真正实现了，此时已经耗时一个下午加一个早上，一路坎坷，不过table最终实现出来的效果，还是很令人满意的，哈哈。

参考资料：https://blog.csdn.net/qq_34223398/article/details/79292319

https://www.cnblogs.com/mozhaocong/p/10435184.html

https://www.cnblogs.com/zyyweb/p/9589447.html