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 = "<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對象調用…）

   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的時候需要通過用來彈出窗口的布局
	<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>

問題：這樣做一開始是沒有想到獲取的時候是通過選擇點擊行的獲取的數據，或者會出現提示框

需要在點擊一下，發現會遮擋數據，雖然只有幾秒鐘，但是給人感覺不舒服。所以今天更新一下這個問題。

2. 更新問題：

        對js的代碼進行更改，之前用的屬性是獲取選擇行，現在使用的屬性是獲取到頁面的數據在通過傳入的坐標辨別是哪個對象的數據。

在對操作欄的格式化進行修改，第一種的方式是調用list.html的js方法間接調用vue對象的方式( 考 昨天沒想到 )，第二種方式是直接調用vue對象并且傳入坐標，這樣就不需要和第一種一樣脫褲子放屁了多寫一個步驟。

3.columns屬性

讀到這里，這篇“Vue怎么查詢數據并通過bootstarp table渲染數據”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。