文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-30 10:36

关注

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

需求

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

如图:

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

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

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

1.需求分析和步骤:

首先改造JS代码:

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

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

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

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

    //操作栏的格式化    function actionFormatter(value, row, index) {    console.log("列"+row,"坐标"+index)        console.log(row.appkey+"---"+row.apptoken)        //var id = value;        var result = "";        result = "<a class=\"btn label label-success btn \" style='background-color: #4575FF' οnclick=QyMsg()>&nbsp;企业秘钥</a>";        return result;    }

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

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

   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的数据

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

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

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

<!-- 企业秘钥 -->div这个id的时候需要通过用来弹出窗口的布局<div id="setQyMsgDlg" class="container-fluid" ><table class="form" ><tbody v-for="dataMsg in QyDataList"><tr v-for="(singleDataMsg,index) in dataMsg.list" v-if="index%2==0" ><td class="formTitle" v-if="index%2==0&&(singleDataMsg.type=='select'||singleDataMsg.type=='input')"><b>{{singleDataMsg.title}}:</b><font v-if="singleDataMsg.checkexpession=='NotNull'" face="宋体">*</font></td><td  class="formValue" v-if="index%2==0&&(singleDataMsg.type=='select'||singleDataMsg.type=='input')"><b class="formTitle " v-if="(singleDataMsg.type=='select'||singleDataMsg.type=='input')">{{submitMsg[singleDataMsg.field]}}<font v-if="singleDataMsg.checkexpession=='NotNull'" face="宋体">*</font></b></td></tr><tr v-for="(singleDataMsg,index) in dataMsg.list" v-if="index%2==1" ><td class="formTitle" v-if="index%2==1&&(singleDataMsg.type=='select'||singleDataMsg.type=='input')"><b>{{singleDataMsg.title}}:</b><font v-if="singleDataMsg.checkexpession=='NotNull'" face="宋体">*</font></td><td  class="formValue" v-if="index%2==1&&(singleDataMsg.type=='select'||singleDataMsg.type=='input')"><b class="formTitle " v-if="(singleDataMsg.type=='select'||singleDataMsg.type=='input')">{{submitMsg[singleDataMsg.field]}}<font v-if="singleDataMsg.checkexpession=='NotNull'" face="宋体">*</font></b></td></tr></tbody></table></div>

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

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

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

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

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

2. 更新问题:

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

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

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

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

3.columns属性

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

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯