专栏首页前端之攻略Vue 结合bootstrap table插件使用

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">
    <link rel="stylesheet" href="../plugins/bootstrap-table-develop/src/bootstrap-table.css">
</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({});

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • Flutter开发:关于隐藏Appbar相关属性的知识点

    this.automaticallyImplyLeading = true,

    三掌柜
  • LeetCode 295.数据流的中位数 - JavaScript

    题目描述:中位数是有序列表中间的数。如果列表长度是偶数,中位数则是中间两个数的平均值。

    心谭博客
  • 【求职】好未来 C++方向面经

    1、Tcp 四大定时器,client 和 server 如果一方掉线会怎么样,掉线重连会怎么样,进程挂

    瑞新
  • 2018年swoole实战2-异步非阻塞投递任务服务端客户端启动服务代码解析

    项目中,总有一些场景会触发耗时比较长的行为。如:用户更新了文章,触发推送消息给此用户的所有粉丝,如果一个用户有10000个粉丝,用同步阻塞的方式来实现,肯定会被...

    章鱼喵
  • HTTP协议之Chunked解析

     在网上找了好一会,始终没发现有解析Chunked编码的文章,那就自己写一个吧,呵呵。

    Java架构师必看
  • 使用Hadoop处理大数据

    大数据现在意味着大利润。世界正在不断积累大量的原始数据,如文本,MP3或Jpeg图片文件,可以通过分析这些数据得到利益。Apache Hadoop是处理大数据的...

    轻吻晴雯
  • 0639-6.1.1-Spark读取由Impala创建的Parquet文件异常分析

    2.通过CDH提供的parquet tool进行分析,参考《0631-6.2-如何确认一个Parquet文件是否被压缩》。

    Fayson

扫码关注云+社区

领取腾讯云代金券