bootStrapTableJs 怎麼引入VUE進行做項目

寫在前面

今天寫一個表格神器，之前我沒有用過，是一個博友問我的時候我去看了一下，覺得很不錯，今天分享一下，只有寫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"
    })
  ]

配圖：


效果：

到這裏就基本結束了，可以使用了，具體想實現什麼功能，可以自己根據配置的字段進行添加就可以了。感謝閱讀！