写在前面

今天写一个表格神器，之前我没有用过，是一个博友问我的时候我去看了一下，觉得很不错，今天分享一下，只有写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 

配图：

• 安装jQuery

npm install jquery

配图：

• 安装bootstrap

npm install bootstrap@3 --save--dev

• 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'

配图：

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

• mockjs文件

let tabelList = [];
for (let i = 0; i < 1000; ++i) {
  tabelList.push({
    name: "小米" + i,
    sex: i % 2 === 0 ? '男' : '女',
    age: Math.floor(Math.random() * 10) + 20,
    school: "武大",
    company: "alibaba",
    address: "杭州市萧山区",
    remark:'这是一段备注'
  })
}
const bootstrapTable = {
  code: 200,
  data: {
    tabelList: tabelList,
    rowStyle: rowStyle,
    columns: [{
      field: 'name',
      title: '姓名',
      align: 'center',
    }, {
      field: 'sex',
      title: '性别',
      align: 'center'
    }, {
      field: 'age',
      title: '年龄',
      align: 'center'
    }, {
      field: 'school',
      title: '学校',
      align: 'center'
    }, {
      field: 'company',
      title: '公司',
      align: 'center'
    }, {
      field: 'address',
      title: '住址',
      align: 'center'
    },{
      field: 'option',
      title: '操作',
      align: 'center'
    }]
  },
  msg: '请求成功'
}


function rowStyle(row, index) {
  console.info(row,index)
  if (index % 2 === 0) {
    return {
      css: {
        'background': '#58aef7'
      }
    }
  }
  return {};
}
export default bootstrapTable;

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"
    })
  ]

配图：


效果：

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