Vue查詢(xún)數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)

更新時(shí)間：2022年04月27日 17:19:53 作者：Hi梅

這篇文章主要為大家介紹了Vue查詢(xún)數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

需求

把頁(yè)面進(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()>&nbsp;企業(yè)秘鑰</a>";
        return result;
    }

只要的這個(gè)返回的數(shù)據(jù)不能用Vue 的點(diǎn)擊@click=“QyMsg”，無(wú)效后面解決的方案采用前端設(shè)置一個(gè)onclick方法QyMSg（）通過(guò)它來(lái)調(diào)用Vue框架的vm對(duì)象的方法實(shí)現(xiàn)該效果。（不推薦，第二天發(fā)現(xiàn)可以通過(guò)Vm對(duì)象調(diào)用…）

2.對(duì)Vue創(chuàng)建一個(gè)對(duì)象，用于返回調(diào)用方法其中QyDataList屬性設(shè)置點(diǎn)擊后返回對(duì)話(huà)框的排版。在通過(guò)vue屬性把數(shù)據(jù)遍歷出來(lái)

var vm = new Vue({
	el:'#dpLTE',
	data: {
		keyword: null,
        companyname:'',
        submitMsg:{
            id:0
		},

        QyDataList:[
            {
                title:"企業(yè)的秘鑰",
                modelname:'mchtConf',
                list:[  //設(shè)置前端頁(yè)面的數(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)建倉(cāng)庫(kù)單", type:"select",data:'iscraterorderflagList'}

                ]
            }
        ]
	},
	methods : {
        QyMsgAlert:function () {//企業(yè)查看
            var ck = $('#dataGrid').bootstrapTable('getSelections');//這個(gè)是通過(guò)選擇行獲取數(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('您沒(méi)有選中任何數(shù)據(jù)項(xiàng)！');
    } else if (id.length > 1) {
        isOK = false;
        dialogMsg('您只能選擇一條數(shù)據(jù)項(xiàng)！');
    }
    return isOK;
}

在js中添加頁(yè)面提交標(biāo)簽用于彈出的對(duì)話(huà)框排版和數(shù)據(jù)。數(shù)據(jù)的來(lái)源QyDataList的數(shù)據(jù)

類(lèi)似這樣的關(guān)系，在通過(guò)QyDataList把key，value遍歷給標(biāo)簽

<!-- 企業(yè)秘鑰 -->
	div這個(gè)id的時(shí)候需要通過(guò)用來(lái)彈出窗口的布局
	<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>

問(wèn)題：這樣做一開(kāi)始是沒(méi)有想到獲取的時(shí)候是通過(guò)選擇點(diǎn)擊行的獲取的數(shù)據(jù)，或者會(huì)出現(xiàn)提示框

需要在點(diǎn)擊一下，發(fā)現(xiàn)會(huì)遮擋數(shù)據(jù)，雖然只有幾秒鐘，但是給人感覺(jué)不舒服。所以今天更新一下這個(gè)問(wèn)題。

2. 更新問(wèn)題：

對(duì)js的代碼進(jìn)行更改，之前用的屬性是獲取選擇行，現(xiàn)在使用的屬性是獲取到頁(yè)面的數(shù)據(jù)在通過(guò)傳入的坐標(biāo)辨別是哪個(gè)對(duì)象的數(shù)據(jù)。

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

3.columns屬性

以上就是Vue查詢(xún)數(shù)據(jù)并通過(guò)bootstarp table渲染數(shù)據(jù)的詳細(xì)內(nèi)容，更多關(guān)于Vue查詢(xún)數(shù)據(jù)bootstarp table渲染的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: