专栏首页前端之攻略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 条评论
登录 后参与评论

相关文章

  • 个推前端微服务化:突破传统SPA瓶颈

    目前的前端领域,单页面应用(SPA)大行其道。而随着时间的推移以及应用功能的丰富,这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。

    个推君
  • webpack带来的安全风险

    最近在资产收集过程中,发现越来越多的vue应用,大部分会使用webpack进行打包,如果没有正确配置,就会导致vue源码泄露。

    ChaMd5安全团队
  • vue与react哪种好?

    vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

    杭州前端工程师
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • 在WordPress中添加简书风格的连载目录和文章导航

    自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

    丘壑
  • Vue案例引发的「嵌套组件」通信的简单方式

    我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

    六小登登
  • 记一次vue长列表的内存性能分析和优化

    这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。

    书童小二
  • navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

    在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

    honey缘木鱼
  • mpvue页面跳转及传值

    vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转: (1).a 标签

    honey缘木鱼
  • 基于CMS的组件复用实践

    目前前端项目大多基于Vue、React、Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维。所以,开发者在使用上述框架时,实际上...

    个推君

扫码关注云+社区

领取腾讯云代金券