bootStrapTableJs 怎么引入VUE进行做项目

秒速五厘米 2023-05-21 07:09 13阅读 0赞

#### 写在前面 ####

今天写一个表格神器，之前我没有用过，是一个博友问我的时候我去看了一下，觉得很不错，今天分享一下，只有写demo，给源码才能得到你们的心，哎，太难了！

#### bootStrapTableJs介绍 ####

首先这是一款处理表格的js，我们如果写element习惯了会发现其实表格的处理是业务中相对简单的，他没有什么很强的交互，就是拿到数据，按照头部和body对应起来就可以了，更新什么的也是没关系的，因为毕竟可以拿到当前行的数据，调更新接口就可以了，表格能说的就是分页的操作了，很多的js处理这块都不是很友好，分页可以分为客户端分页和服务端分页，一般相对大一点的项目会服务端分页，原因也很简单，每一次拿到的数据都不是很多，都是一页的数据，我们默认一般是5-20条就不少了，这样对页面渲染的压力也不大，但是如果项目或者数据不是很大的情况下还是建议是客户端分页，这样的好处是减少页面的请求次数，提升页面的性能，今天介绍的bootStrapTableJs是一款既可以客户端分页也可以服务端分页的神器，还支持客户端或者服务端模糊搜索等功能

#### jQuery+bootStrapTableJs ####

今天要写的是vue怎么使用这个js，所以jQuery的这里简单的说一下，就是我们直接新建一个html文件，里面引入cdn或者自己下载下来的bootStrapTableJs，这里将jqueryjs引入放前面就可以了，按照文档写的就可以了，不写demo了。有什么问题的话，可以左侧联系我

#### VUE+bootStrapTableJs ####

首先我们新建一个vue项目，然后安装bootStrapTableJs

*  安装bootStrapTableJs

npm install bootstrap-table

配图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]

*  安装jQuery

npm install jquery

配图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]

*  安装bootstrap

npm install bootstrap@3 --save--dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]

*  main.js引入js文件

import $ from 'jquery'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min.js'
    import 'bootstrap-table/dist/bootstrap-table.min.css'
    import 'bootstrap-table/dist/bootstrap-table.min.js'
    import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

配图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]

> 因为我没有接口，没办法直接拿到后端的数据，所以写了一个mockjs文件，模拟请求接口的情况，这是我的JS文件，您如果有后端数据的话，下面的步骤可以不做

*  mockjs文件

#### bootstrapTable.vue 实现 ####

<template>
      <div>
        <common-back :currPage='currPage'>
        </common-back>
        <table id="table" ref="table"></table>
      </div>
    </template>
    
    <script>
      export default { 
        name: "bootStrapTable",
        data() { 
          return { 
            currPage: this.$route.params.pageFlag,
          }
        },
        mounted() { 
          this.gettableInfo()
        },
        methods: { 
          /** * @function gettableInfo 获取表格的列和源数据 */
          gettableInfo() { 
            this.$axios.get('api/bootstrapTable.do').then((res) => { 
              $('#table').bootstrapTable({ 
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                pagination: true,  //是否分页
                //toolbar: '#toolbar',
                detailView: true,  //前面的加号，详细数据
                singleSelect: true,
                checkbox: true,
                rowStyle: this.rowStyle,
                cellStyle: this.cellStyle,
                clickToSelect: true,
                sortable: true,    //是否排阻
                sortOrder: 'asc',  //正序或者倒序
                pageSize: 5,       //每夜显示多少条
                striped: true,     //是否斑马纹
                search: true,      //显示搜索
                searchText: '',    //搜索默认文字
                strictSearch: false, //是否模糊搜索
                showRefresh: true,   //显示刷新
                showToggle: true,    //显示表格别的样式
                showPaginationSwitch: true, //显示分页功能
                showFullscreen: true,   //是否全屏
                minimumCountColumns: 5,  //最少几条不显示分页
                paginationPreText: '上一页',  //上一页
                paginationNextText: '下一页', //下一页
                pageList: [5, 10, 15],  //可供选择的每叶条数
                data: res.data.data.tabelList,  //表格数据
                columns: res.data.data.columns  //表格列数据
              })
            }).catch((error) => { 
              console.error(error)
            })
    
          },
          /** * @function rowStyle * @param row * @param index * @returns { {css: {background: string}}|{}} */
          rowStyle(row, index) { 
            console.info(row, index)
            if (index % 2 === 0) { 
              return { 
                css: { 
                  'background': '#58aef7'
                }
              }
            } else { 
              return { }
            }
          },
          /** * @function cellStyle * @param row * @param index * @returns { {css: {background: string}}|{}} */
          cellStyle(row, index) { 
            if (index % 2 === 0) { 
              return { 
                css: { 
                  'background': '#58aef7'
                }
              }
            } else { 
              return { }
            }
          }
        },
      }
    </script>
    <style scoped>
    </style>

> 这里说明一下，就是关于上面的请求的事情，bootStrapTableJs本身自带的就是有请求的，但是他的请求返回的格式如果是JSON的话是可以直接渲染的， 但是我们的一般请求的返回不会直接就是JSON数据的，所以我这里是将返回的格式单独列了出来。

*  配置webpack.base.conf.js

var webpack = require('webpack');
     plugins: [
        new webpack.ProvidePlugin({ 
          $: "jquery",
          jQuery: "jquery"
        })
      ]

配图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 5]  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 6]

到这里就基本结束了，可以使用了，具体想实现什么功能，可以自己根据配置的字段进行添加就可以了。感谢阅读！  
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite\_code=ut6zjitp8kug

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20230521/6f4a8c8660a04a9ab802c98d78f47469.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20230521/60afdb070023494b8359ef551c7cfc71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]: /images/20230521/709b240651874b2ca58d08a84ac98c26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]: /images/20230521/0369e7529f2849cda0aedb0e78b629c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]: /images/20230521/cc85b560de274a35b8c511e7a5a0d2df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 5]: /images/20230521/15eadc635adc4eb1940eaca006d62742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 6]: /images/20230521/6c6f1d9362b8477097213717fda476c6.png