Vue怎么查询数据并通过bootstarp table渲染数据

本文小编为大家详细介绍"Vue怎么查询数据并通过bootstarp table渲染数据"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue怎么查询数据并通过bootstarp table渲染数据"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

需求

把页面进行改造把apptoken，appkey列隐藏，并且更改该列为企业秘钥，列下显示查看公司秘钥

如图：

点击按钮显示当前的企业秘钥：

1.需求分析和步骤：

1.首先改造JS代码：

首先把数据要渲染的visible设置为true需要的设置false，

主要的formatter: actionFormatter这个用于：格式化输出函数及其他

    //操作栏的格式化    function actionFormatter(value, row, index) {            console.log("列"+row,"坐标"+index)        console.log(row.appkey+"---"+row.apptoken)        //var id = value;        var result = "";        result = " 企业秘钥";        return result;    }

只要的这个返回的数据不能用Vue 的点击@click="QyMsg"，无效后面解决的方案采用前端设置一个onclick方法QyMSg（）通过它来调用Vue框架的vm对象的方法实现该效果。（不推荐，第二天发现可以通过Vm对象调用…）

2. 对Vue创建一个对象，用于返回调用方法其中QyDataList属性设置点击后返回对话框的排版。在通过vue属性把数据遍历出来

var vm = new Vue({        el:'#dpLTE',        data: {                keyword: null,        companyname:'',        submitMsg:{            id:0                },        QyDataList:[            {                title:"企业的秘钥",                modelname:'mchtConf',                list:[  //设置前端页面的数据模型    // 其中field ：返回json数据中的name                    {isvalid:"",checkexpession:"",field : "apptoken", title : "apptoken", type:"input"},                    {isvalid:"",checkexpession:"",field : "appkey", title : "key", type:"input"},                    // {isvalid:"",checkexpession:"",field : "craterorderflag", title : "创建仓库单", type:"select",data:'iscraterorderflagList'}                ]            }        ]        },        methods : {        QyMsgAlert:function () {//企业查看            var ck = $('#dataGrid').bootstrapTable('getSelections');//这个是通过选择行获取数据            if(checkedRow(ck)){//checkedRow判断一下行是否被选择                vm.submitMsg=ck[0];//把获取到的数据返回给vm用于渲染                layer.open({                    type : 1,                    title : '企业秘钥',                    closeBtn : 1,                    anim: -1,                    isOutAnim: false,                    shadeClose : false,                    shade : 0.3,                    area : ['450px', '250px'],                    shift : 5,                    content : $("#setQyMsgDlg"),                    btn: ['确定', '取消'],                    success: null,                    yes:null                });            }        },        }})

这个方法用于判断行是否被选择

checkedRow = function (id) {    var isOK = true;    if (id == undefined || id == "" || id == 'null' || id == 'undefined') {        isOK = false;        dialogMsg('您没有选中任何数据项！');    } else if (id.length > 1) {        isOK = false;        dialogMsg('您只能选择一条数据项！');    }    return isOK;}

在js中添加页面提交标签用于弹出的对话框排版和数据。数据的来源QyDataList的数据

类似这样的关系，在通过QyDataList把key，value遍历给标签

        div这个id的时候需要通过用来弹出窗口的布局        
                
                        
                                
                                        
{{singleDataMsg.title}}:*
                                                
                                                        {{submitMsg[singleDataMsg.field]}}*                                                
                                
                                
                                        
{{singleDataMsg.title}}:*
                                        
                                                {{submitMsg[singleDataMsg.field]}}*                                        
                                
                        
                
        

问题：这样做一开始是没有想到获取的时候是通过选择点击行的获取的数据，或者会出现提示框

需要在点击一下，发现会遮挡数据，虽然只有几秒钟，但是给人感觉不舒服。所以今天更新一下这个问题。

2. 更新问题：

对js的代码进行更改，之前用的属性是获取选择行，现在使用的属性是获取到页面的数据在通过传入的坐标辨别是哪个对象的数据。

在对操作栏的格式化进行修改，第一种的方式是调用list.html的js方法间接调用vue对象的方式( 考 昨天没想到 )，第二种方式是直接调用vue对象并且传入坐标，这样就不需要和第一种一样脱裤子放屁了多写一个步骤。

3.columns属性

读到这里，这篇"Vue怎么查询数据并通过bootstarp table渲染数据"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。