微客导航 » 文章资讯 » bootstrap-table formatter 使用vue组件的方法

bootstrap-table formatter 使用vue组件的方法

2023-08-23 17:52:04 333

bootstrap-table简介

•1.1、bootstraptable简介及特征：

Bootstraptable是国人开发的一款基于Bootstrap的jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。其官方网站地址为：http://bootstrap-table.wenzhixin.net.cn/。里面可以下载使用所需的JS和CSS文件，以及参考文档和例子。

•支持Bootstrap3和Bootstrap2
•自适应界面
•固定表头
•非常丰富的配置参数
•直接通过标签使用
•显示/隐藏列
•显示/隐藏表头
•通过AJAX获取JSON格式的数据
•支持排序
•格式化表格
•支持单选或者多选
•强大的分页功能
•支持卡片视图
•支持多语言
•支持插件

下面通过实例代码给大家介绍bootstrap-tableformatter使用vue组件的方法，具体代码如下所示：

import{Subject}from"rxjs";
importVuefrom"vue";
exportconstBtEventHub=newSubject();
constVueComList=[];
letVueComId=0;
BtEventHub.debounceTime(10)
.filter(()=>VueComList.length>0)
.delay(10)
.subscribe(function(){
constlen=VueComList.length-1;
for(leti=len;i>=0;i--){
constitem=VueComList[i];
constdom=document.getElementById(item.name);
if(dom!=null){
newVue(item);
VueComList.splice(i,1);
}
}
if(VueComList.length===0){
VueComId=0;
}
});
exportfunctionBtAddVueCom(obj:object){
constid=`_vue_com_${VueComId++}`;
VueComList.push({
el:"#"+id,
name:id,
...obj
});
setTimeout(()=>{
BtEventHub.next();
},0);
returnid;
}

window["BtAddVueCom"]=BtAddVueCom;
functionColFormatter1(value,row){
constid=window.BtAddVueCom({
template:'',
data:function(){
return{
row
}
}
});
return`

`; }

ps：Vue结合bootstraptable插件使用

bootstrapTable插件可以很方便的搜索排序，方便快捷，下面是结合vue的完整的例子。





VueBootstrapTableDemo

(adsbygoogle=window.adsbygoogle||[]).push({});

总结

以上所述是小编给大家介绍的bootstrap-tableformatter使用vue组件的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
3162201930
czq8825@qq.com

bootstrap-table formatter 使用vue组件的方法

热门推荐

随机推荐