bootStrapTableJs 怎么引入VUE进行做项目

何处锦绣不灰堆 2020-11-13 12:56:11
项目 vue 进行 引入 bootstraptablejs


写在前面

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

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/105854440

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple