VUE和Bootstrap使用Table的一个问题

kmkjwjf 2017-01-10 09:43:34

我的网站是做一个数据库维护。数据库中有多张表，每张表的字段不一样，因此我是通过VUE + BootStrap来实现：
HTML代码如下：

<table style=" text-overflow:ellipsis; " class="table table-condensed"

                   data-ajax="ajaxRequest"

                   data-toggle="table"

                   pageNumber=1

                   id="componenttable"

                   data-side-pagination="server"

                   data-unique-id="pd-id"

                   data-pagination="true">

                <thead style="background-color:#169BD5;color:white;">

                <tr>

                    <th v-for="item in columns" data-field="${item}" class="product_th">${item}</th>

                </tr>

                </thead>

            </table>

对应的javaScript代码如下：



var tableVM = new Vue({

                el: "#componenttable",

                data: {

                    columns: ["status", "speed","id", "gmt_create", "gmt_modified"],

                    "table": "mytable"

                },

                created:function(){

                    var _self = this;

                        var url = "/testweb/tablecolumns?table=" + _self.table;

                        $.get(url, function (data) {

                            var all_data = JSON.parse(data);

                            _self.columns =  all_data["result"];

                        });

                },

                methods: {

                }

            }

    );

function ajaxRequest(params) {

        url = "/testweb/tabledata";

        $.post(url, {"table": "mytable"}, function (data) {

            all_data = JSON.parse(data);

            data = all_data["result"];

            params.success({total: all_data["count"], rows: data});

            $(".sortable").css("padding-right", "15px");

            $(".td-text-container").parent().css("text-align", "left");

        });

    }