Vue查詢數(shù)據(jù)并通過bootstarp?table渲染數(shù)據(jù)
需求
把頁面進(jìn)行改造把a(bǔ)pptoken，appkey列隱藏，并且更改該列為企業(yè)秘鑰，列下顯示查看公司秘鑰
如圖：
點(diǎn)擊按鈕顯示當(dāng)前的企業(yè)秘鑰：
1.需求分析和步驟：
1.首先改造JS代碼：
首先把數(shù)據(jù)要渲染的visible設(shè)置為true需要的設(shè)置false，
主要的formatter: actionFormatter這個(gè)用于：格式化輸出函數(shù)及其他
//操作欄的格式化
function actionFormatter(value, row, index) {
console.log("列"+row,"坐標(biāo)"+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()> 企業(yè)秘鑰</a>";
return result;
}
只要的這個(gè)返回的數(shù)據(jù)不能用Vue 的點(diǎn)擊@click=“QyMsg”，無效后面解決的方案采用前端設(shè)置一個(gè)onclick方法QyMSg（）通過它來調(diào)用Vue框架的vm對象的方法實(shí)現(xiàn)該效果。（不推薦，第二天發(fā)現(xiàn)可以通過Vm對象調(diào)用…）
2.對Vue創(chuàng)建一個(gè)對象，用于返回調(diào)用方法其中QyDataList屬性設(shè)置點(diǎn)擊后返回對話框的排版。在通過vue屬性把數(shù)據(jù)遍歷出來
var vm = new Vue({
el:'#dpLTE',
data: {
keyword: null,
companyname:'',
submitMsg:{
id:0
},
QyDataList:[
{
title:"企業(yè)的秘鑰",
modelname:'mchtConf',
list:[ //設(shè)置前端頁面的數(shù)據(jù)模型 // 其中field ：返回json數(shù)據(jù)中的name
{isvalid:"",checkexpession:"",field : "apptoken", title : "apptoken", type:"input"},
{isvalid:"",checkexpession:"",field : "appkey", title : "key", type:"input"},
// {isvalid:"",checkexpession:"",field : "craterorderflag", title : "創(chuàng)建倉庫單", type:"select",data:'iscraterorderflagList'}
]
}
]
},
methods : {
QyMsgAlert:function () {//企業(yè)查看
var ck = $('#dataGrid').bootstrapTable('getSelections');//這個(gè)是通過選擇行獲取數(shù)據(jù)
if(checkedRow(ck)){//checkedRow判斷一下行是否被選擇
vm.submitMsg=ck[0];//把獲取到的數(shù)據(jù)返回給vm用于渲染
layer.open({
type : 1,
title : '企業(yè)秘鑰',
closeBtn : 1,
anim: -1,
isOutAnim: false,
shadeClose : false,
shade : 0.3,
area : ['450px', '250px'],
shift : 5,
content : $("#setQyMsgDlg"),
btn: ['確定', '取消'],
success: null,
yes:null
});
}
},
}
})
這個(gè)方法用于判斷行是否被選擇
checkedRow = function (id) {
var isOK = true;
if (id == undefined || id == "" || id == 'null' || id == 'undefined') {
isOK = false;
dialogMsg('您沒有選中任何數(shù)據(jù)項(xiàng)！');
} else if (id.length > 1) {
isOK = false;
dialogMsg('您只能選擇一條數(shù)據(jù)項(xiàng)！');
}
return isOK;
}
在js中添加頁面提交標(biāo)簽用于彈出的對話框排版和數(shù)據(jù)。數(shù)據(jù)的來源QyDataList的數(shù)據(jù)
類似這樣的關(guān)系，在通過QyDataList把key，value遍歷給標(biāo)簽
<!-- 企業(yè)秘鑰 -->
div這個(gè)id的時(shí)候需要通過用來彈出窗口的布局
<div id="setQyMsgDlg" class="container-fluid" style="display: none;">
<table class="form" style="margin-top: 20px;margin-bottom: 20px">
<tbody v-for="dataMsg in QyDataList">
<tr v-for="(singleDataMsg,index) in dataMsg.list" v-if="index%2==0" style="text-align: center">
<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 style="text-align: left;margin-left: 20px" 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" style="text-align: center">
<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 style="text-align: left;margin-left: 20px" 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>
問題：這樣做一開始是沒有想到獲取的時(shí)候是通過選擇點(diǎn)擊行的獲取的數(shù)據(jù)，或者會出現(xiàn)提示框
需要在點(diǎn)擊一下，發(fā)現(xiàn)會遮擋數(shù)據(jù)，雖然只有幾秒鐘，但是給人感覺不舒服。所以今天更新一下這個(gè)問題。
2. 更新問題：
對js的代碼進(jìn)行更改，之前用的屬性是獲取選擇行，現(xiàn)在使用的屬性是獲取到頁面的數(shù)據(jù)在通過傳入的坐標(biāo)辨別是哪個(gè)對象的數(shù)據(jù)。
在對操作欄的格式化進(jìn)行修改，第一種的方式是調(diào)用list.html的js方法間接調(diào)用vue對象的方式( 考 昨天沒想到 )，第二種方式是直接調(diào)用vue對象并且傳入坐標(biāo)，這樣就不需要和第一種一樣脫褲子放屁了多寫一個(gè)步驟。
3.columns屬性
以上就是Vue查詢數(shù)據(jù)并通過bootstarp table渲染數(shù)據(jù)的詳細(xì)內(nèi)容，更多關(guān)于Vue查詢數(shù)據(jù)bootstarp table渲染的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文給大家分享一段詳細(xì)的代碼給大家介紹Vue+Vux項(xiàng)目實(shí)踐思路,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue中多個(gè)有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
淺析vue偵測數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對象，當(dāng)我們修改時(shí)，視圖會被更新，而變化偵測是響應(yīng)式系統(tǒng)的核心2021-06-06
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下2023-10-10
vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了Vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
移動端 Vue+Vant 的Uploader 實(shí)現(xiàn)上傳、壓縮、旋轉(zhuǎn)圖片功能
這篇文章主要介紹了移動端 Vue+Vant 的Uploader 實(shí)現(xiàn) 上傳、壓縮、旋轉(zhuǎn)圖片功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06