bootStrapTableJs 怎么引入VUE进行做项目---何处锦绣不灰堆

bootStrapTableJs介绍

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

jQuery+bootStrapTableJs

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

VUE+bootStrapTableJs

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

安装bootStrapTableJsnpm install bootstrap-table

配图：

安装jQuerynpm install jquery

配图：

安装bootstrapnpm install bootstrap@3 --save--devmain.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.jsvar webpack = require('webpack'); plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]

配图：

效果：

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

---来自腾讯云社区的---何处锦绣不灰堆