本文介绍如何在 Bootstrap Table 的 formatter 函数中嵌入 Vue 组件。通过事件总线监听 DOM 挂载状态，利用 BtAddVueCom 方法动态创建 Vue 实例并注入到表格单元格中，实现如开关切换等交互功能。
Bootstrap Table 简介
Bootstrap Table 简介
1.1、bootstrap table简介及特征：
Bootstrap Table 是一款由国内开发者基于 Bootstrap 框架和 jQuery 开发的表格插件。它通过简单的配置即可实现强大的功能，包括单选、多选、排序、分页、编辑、导出以及过滤（需扩展）等。目前该插件在 GitHub 上已获得超过 2600 个 Star，广受欢迎。其官方网站为 http://bootstrap-table.wenzhixin.net.cn/，用户可在此下载所需的 JS 和 CSS 文件，并查阅参考文档及示例代码。
• 支持 Bootstrap 3 和 Bootstrap 2 • 自适应界面 • 固定表头 • 提供丰富的配置参数 • 支持直接通过 HTML 标签使用 • 支持显示或隐藏列 • 支持显示或隐藏表头 • 通过 AJAX 获取 JSON 格式数据 • 支持数据排序 • 支持表格格式化 • 支持单选或多选模式 • 具备强大的分页功能 • 支持卡片视图模式 • 支持多语言环境 • 支持插件扩展
在 formatter 中使用 Vue 组件的实现
接下来通过具体的实例代码，详细介绍如何在 Bootstrap Table 的 formatter 中使用 Vue 组件。具体实现代码如下所示：
import { Subject } from "rxjs";
import Vue from "vue";
export const BtEventHub = new Subject();
const VueComList = [];
let VueComId = 0;
BtEventHub.debounceTime(10)
.filter(() => VueComList.length > 0)
.delay(10)
.subscribe(function() {
const len = VueComList.length - 1;
for (let i = len; i >= 0; i--) {
const item = VueComList[i];
const dom = document.getElementById(item.name);
if (dom != null) {
new Vue(item);
VueComList.splice(i, 1);
}
}
if (VueComList.length === 0) {
VueComId = 0;
}
});
export function BtAddVueCom(obj: object) {
const id = `_vue_com_${VueComId++}`;
VueComList.push({
el: "#" + id,
name: id,
...obj
});
setTimeout(() => {
BtEventHub.next();
}, 0);
return id;
}
window["BtAddVueCom"] = BtAddVueCom;
function ColFormatter1(value, row) {
const id = window.BtAddVueCom({
template: '<el-switch v-model="row.IsShow"></el-switch>',
data: function () {
return {
row
}
}
});
return `<div id="${id}"></div>`;
}ps：Vue 结合bootstrap table插件使用
Bootstrap Table 插件能够方便地实现搜索和排序功能。下面是一个结合 Vue 的完整示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Bootstrap Table Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="../plugins/bootstrap-table-develop/src/bootstrap-table.css" rel="external nofollow" >
</head>
<body class="">
<div>
<table class="table table-bordered table-striped" id="tableTest1">
</table>
</div>
<script src="../jQuery/jQuery-2.1.4.min.js"></script>
<script src="../dist/vue.js"></script>
<script src="../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script>
<script src="../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
<script>
var app7 = new Vue({
el: '#tableTest1',
data: {
//message: [],
message: [],
columns: [{
title: 'Id',
field: 'id'
},
{
field: 'name',
title: 'Item Name'
}, {
field: 'url',
title: 'url'
}, {
field: 'alex',
title: 'alex'
}, {
field: 'country',
title: 'country'
}
],
},
created() {
//console.log(this.message)
this.getData();
this.intervalGetData();
//console.log(this.message)
},
methods: {
intervalGetData() {
setInterval(() => {
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// //console.log(JSON.parse(data))
// console.log("get data")
// })
this.getData();
}, 3000)
},
getData() {
//es6 箭头函数的写法
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// console.log("init data")
// })
var that = this;
$.get("selectBtTable.php?action=init_data_list", function(data) {
var data = JSON.parse(data);
that.message = data;
$('#tableTest1').bootstrapTable('load', that.message);
console.log("init data")
})
}
},
mounted() {
console.log(this.message + "mounted")
$('#tableTest1').bootstrapTable({ columns: this.columns, height: 500, search: true });
}
})
</script>
</body>
</html> (adsbygoogle = window.adsbygoogle || []).push({});
总结
以上所述是小编给大家介绍的bootstrap-table formatter 使用vue组件的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！