Shulou(Shulou.com)05/31 Report--

This article is a detailed introduction to "Vue how to query data and render data through bootstarp table." The content is detailed, the steps are clear, and the details are properly handled. I hope this article "Vue how to query data and render data through bootstarp table" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

demand

Make changes to the page Hide the apptoken, appkey column and change the column to Enterprise Key, Show below View Company Key

As shown in the figure:

Click the button to display the current enterprise key:

1. Requirements Analysis and Steps:

1. First, modify JS code:

First set the visible of the data to be rendered to true, the required setting false,

Main formatter: actionFormatter This is used to format output functions and others

//formatting of action bar function actionFormatter(value, row, index) { console.log("column"+row,"coordinate"+index) console.log(row.appkey+"---"+row.apptoken) //var id = value; var result = ""; result = "Enterprise Key"; return result; }

As long as this returned data cannot be clicked with Vue @click="QyMSg", the solution behind invalid is to set an onclick method QyMSg () on the front end through which to call the Vue framework vm object method to achieve this effect. (Not recommended, found the next day can be called through the Vm object...)

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]}}*

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

You need to click again and find that it will block the data, although only for a few seconds, but it feels uncomfortable. Update this question today.

2. Update Question:

Changes to js code. Previously, the attribute used was to get the selection line. Now, the attribute used is to get the data of the page and identify which object it is by the passed coordinates.

In modifying the formatting of the operation bar, the first way is to call the js method of list.html to indirectly call the vue object (test yesterday did not think of), the second way is to directly call the vue object and pass the coordinates, so that you do not need to take off your pants and fart like the first one.

3. columns Properties

Read here, this article "Vue how to query data and render data through bootstarp table" article has been introduced, want to master the knowledge points of this article still need to be used by yourself to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.