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

目前遇到的问题:

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

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

大概效果

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

bootstrap-vue + boostrap4 + vue 实现table表格中根据每行不同数据实现不同tooltip提示_第1张图片

看来看去只能使用原生html标签,这就意味着bootstrapvue中  这类标签是无法渲染的,要命的是这种图标都没法用了,灰常不方便,于是渲染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 = '';

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

bootstrap-vue + boostrap4 + vue 实现table表格中根据每行不同数据实现不同tooltip提示_第2张图片

意味着使用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

 

 

 

你可能感兴趣的:(WEB前端)