在vue2.0中使用bootstarpTable（jquery+bootstarp+bootstarpTable）

​

要想使用bootstarp-table就需要按順序引入

jquery > bootstarp > bootstarp-table

//路徑可能會有變動 最好在node_modules 中看看

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'

mian.js 入口文件引用前,當然要有依賴啦!

注意事項:要在當前項目文件夾下下載安裝

npm install  jquery --save--dev
npm install bootstrap@3 --save--dev
npm install bootstrap-table@1.11.1 --save--dev
npm install --save popper.js      //這個為第三方依賴

修改webpack.base.conf.js文件配置

1.加入

var webpack = require('webpack');

2.在module.exports里輸入：

plugins: [
		    new webpack.ProvidePlugin({
		      $: "jquery",
		      jQuery: "jquery"
		    })
		   ]

​

​

最后

運行 npm run dev 就可以正常啟動了

推薦檢測方法

一. 檢測jquery

$(function () {  
			    alert(123);  
			 });

頁面彈出123,就說明第一步是沒有問題的

二.檢測 bootstrap

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-primary">（首選項）Primary</button>
      <button type="button" class="btn btn-success">（成功）Success</button>
    </div>

按鈕擁有樣式,就說明這步也是沒有問題的

三.檢測bootstarp-table

  export default {
    data(){
      return {

      }
    },
    mounted(){
      $("#test").text("This is only a test!");


      $('#table').bootstrapTable('destroy').bootstrapTable({
        url: '',
        method: 'GET',
        uniqueId: 'id',                        // 綁定ID，不顯示
        striped: false,                         //是否顯示行間隔色
        cache: false,                          //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
        sortable: true,                        //是否啟用排序
        sortOrder: "asc",                      //排序方式
        sidePagination: "client",              //分頁方式：client客戶端分頁，server服務端分頁（*）
        undefinedText: '--',
        //singleSelect: true,                  // 單選checkbox，默認為復選
        showRefresh   : true,                  // 顯示刷新按鈕
        showColumns   : true,                  // 選擇顯示的列
        toolbar: '#item_info_toolbar',         // 搜索框位置
        search: true,                          // 搜索開啟,
        strictSearch: true,
        clickToSelect: true,                   // 點擊選中行
        pagination: true,                      //是否顯示分頁
        pageNumber:1,                          //初始化加載第一頁，默認第一頁,並記錄
        pageSize:5,//每頁顯示的數量
        pageList: [5, 10, 20, 50, 100],//設置每頁顯示的數量
        paginationPreText:"上一頁",
        paginationNextText:"下一頁",
        paginationLoop:false,
        //showToggle: true,                   //是否顯示詳細視圖和列表視圖的切換按鈕
        //cardView: false,                    //是否顯示詳細視圖
        //detailView: false,                  //是否顯示父子表
        //showPaginationSwitch: true,
        //得到查詢的參數
        queryParams : function (params) {
          //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
          var temp = {
            rows: params.limit,                         //頁面大小
            page: (params.offset / params.limit) + 1,   //頁碼
            sort: params.sort,      //排序列名
            sortOrder: params.order //排位命令（desc，asc）
          };
          return temp;
        },
        columns: [
          {
            checkbox: true
          },{
            field: 'username',
            title:'用戶名',
            valign: 'middle',
            width: '16%',
            sortable: true
          },{
            field: 'fullname',
            title:'姓名',
            width: '16%'
          },{
            field: 'status',
            title:'密碼認證',
            width: '16%'
          },{
            field: 'availableSpace',
            title:'智能卡認證',
            valign: 'middle',
            width: '16%'
          },{
            field: 'totalSpace',
            title:'個人空間配額',
            width: '16%'
          },{
            field: 'storageServer',
            title:'私密空間配額',
            formatter: operateFormatter
          }
        ],
        onLoadSuccess: function () {
          alert('表格加載成功！');
        },
        onLoadError: function () {
          showTips("數據加載失敗！");
        },
        onDblClickRow: function (row, $element) {
          var id = row.ID;
          //EditViewById(id, 'view');
        },
        rowStyle: function (row, index) { //設置行的特殊樣式
          //這里有5個取值顏色['active', 'success', 'info', 'warning', 'danger'];
          var strclass = "";
          if (index == 1) {
            strclass = "warning";
            console.log(row);
          }
          return { classes: strclass }
        }
      });

      function getSelectValue(){
        var a = $table.bootstrapTable('getSelections');//獲取選中行的數據
        if(a.length > 0){
          console.log(a);
        }
      }

      function operateFormatter (value, row, index) {
        var result = '<button class="btn  btn-action" title="激活USBKEY認證" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>'
        return result;
      }

    }
  }

最后的效果如下：

​