专栏首页用户7363577的专栏bootStrapTableJs 怎么引入VUE进行做项目

bootStrapTableJs 怎么引入VUE进行做项目

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

配图:

效果:

到这里就基本结束了,可以使用了,具体想实现什么功能,可以自己根据配置的字段进行添加就可以了。感谢阅读!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用webpack进行打包过程详解及常见问题解决

    一直想学webpack的打包过程,找到了很多的教程,一直没有找到一个比较好的,今天找到一个比较差不多的,转载一下!

    何处锦绣不灰堆
  • Javascript 常见的操作数组的方法

    解释: arr 表示原数组; prev 表示上一次调用回调时的返回值,或者初始值 init; cur 表示当前正在处理的数组元素; index 表示当前...

    何处锦绣不灰堆
  • vue实现全局函数以及生成md文档目录和html文件

    何处锦绣不灰堆
  • LinkedIn收购Glint,与Facebook的战火烧到了微软

    2016年纳德拉执掌微软后的首次重大收购发生了,斥资262亿美元收购LinkedIn,鉴于诺基亚的悲惨命运,有媒体对那次天价收购表示了担忧。

    人称T客
  • B/C混搭卖出天价的Linkedin,对中国的金蝶云之家们有什么启示?

    在苹果WWDC大会之前,沉寂多日的微软憋了一个大新闻:262亿美元收购企业级社交平台LinkedIn,较之最近一次收盘价溢价50%。收购之后,LinkedIn将...

    罗超频道
  • LinkedIn增长揭秘:262亿美元的增长引擎是如何练成的?

    撰文:欧开磊 2002年,号称硅谷人脉之王的Reid Hoffman聚集了他之前的一些来自SocialNet和PayPal的老部下,打算再度出山创业,这次他想打...

    人称T客
  • 低调华丽 LinkedIn

    相信大家都注册过 LinkedIn, 一个基于 professional 的社交网络,通过 LinkedIn 联系 recruiter 是找工作的重要渠道。 在...

    包子面试培训
  • Salesforce或将以远高于微软的262亿美金的价格收购LinkedIn

    一个多月前,微软官方博客就宣布了,微软和 LinkedIn 公司已经达成了一项最终协议,微软将以每股 196 美元,合计 262 亿美元的全现金收购包括 Lin...

    臭豆腐
  • 大数据如何让社交网站收入增长85%?

    每一天都有数百万用户登录 LinkedIn.com。 LinkedIn 的用户背景多元,需求多样,有企业、有学生,还有专业人员,他们有的积极求职谋业,有的只是为...

    华章科技
  • Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

    前端下午茶

扫码关注云+社区

领取腾讯云代金券