Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
更新時(shí)間：2018年09月05日 10:03:40 作者：xm_w_xm
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
如圖所示，當(dāng)我們獲取到數(shù)據(jù)后每個(gè)欄都只顯示5條，多出的部分隱藏，點(diǎn)擊顯示全部將數(shù)據(jù)都展現(xiàn)出來，如圖所示
首先我們的數(shù)據(jù)類型是這樣的，
tableData: [
{
"comment": "",
"lscm": [
{
"count": "1268",
"id": 1,
"namech": "OGC WMTS",
"nameen": "WMTS",
"state": 1,
"timestamp": 1439193813000,
"typeid": 1
},
{
"count": "26",
"id": 2,
"namech": "OGC WMS",
"nameen": "WMS",
"state": 1,
"timestamp": 1439193815000,
"typeid": 1
},
{
"count": "46",
"id": 3,
"namech": "OGC WFS",
"nameen": "WFS",
"state": 1,
"timestamp": 1439193816000,
"typeid": 1
},
{
"count": "2",
"id": 4,
"namech": "OGC WCS",
"nameen": "WCS",
"state": 1,
"timestamp": 1439193817000,
"typeid": 1
},
{
"count": "38",
"id": 5,
"namech": "OGC WFS-G",
"nameen": "WFS-G",
"state": 1,
"timestamp": 1439193837000,
"typeid": 1
},
{
"count": "19",
"id": 6,
"namech": "地名搜索服務(wù)",
"nameen": "DMSSFW",
"state": 1,
"timestamp": 1433728837000,
"typeid": 1
},
{
"count": "0",
"id": 7,
"namech": "ESRI*.shp",
"nameen": "shp",
"state": 1,
"timestamp": 1433728829000,
"typeid": 1
},
{
"count": "0",
"id": 8,
"namech": "KML",
"nameen": "KML",
"state": 1,
"timestamp": 1433728822000,
"typeid": 1
},
{
"count": "0",
"id": 9,
"namech": "CSV",
"nameen": "CSV",
"state": 1,
"timestamp": 1433728818000,
"typeid": 1
},
{
"count": "14",
"id": 10,
"namech": "OGC WPS",
"nameen": "WPS",
"state": 1,
"timestamp": 1439194818000,
"typeid": 1
},
{
"count": "5",
"id": 11,
"namech": "路徑規(guī)劃服務(wù)",
"nameen": "LJGHFW",
"state": 1,
"timestamp": 1433728809000,
"typeid": 1
},
{
"count": "0",
"id": 59,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1433728776000,
"typeid": 1
}
],
"mark": 1,
"namech": "服務(wù)類型",
"nameen": "formatid",
"state": 0,
"timestamp": 1430899276000
},
{
"lscm": [
{
"count": "1393",
"id": 12,
"namech": "基礎(chǔ)地理框架數(shù)據(jù)",
"nameen": "JCDLKJSJ",
"state": 1,
"timestamp": 1430984656000,
"typeid": 2
},
{
"count": "1",
"id": 13,
"namech": "機(jī)關(guān)單位",
"nameen": "JGDW",
"state": 1,
"timestamp": 1431331139000,
"typeid": 2
},
{
"count": "0",
"id": 14,
"namech": "人口",
"nameen": "RK",
"state": 1,
"timestamp": 1430984658000,
"typeid": 2
},
{
"count": "0",
"id": 15,
"namech": "氣象",
"nameen": "QX",
"state": 1,
"timestamp": 1430984659000,
"typeid": 2
},
{
"count": "1",
"id": 16,
"namech": "旅游",
"nameen": "LY",
"state": 1,
"timestamp": 1430984659000,
"typeid": 2
},
{
"count": "1",
"id": 17,
"namech": "國民經(jīng)濟(jì)核算",
"nameen": "GMJJHS",
"state": 1,
"timestamp": 1430984660000,
"typeid": 2
},
{
"count": "1",
"id": 18,
"namech": "就業(yè)和工資",
"nameen": "JYHGZ",
"state": 1,
"timestamp": 1430984661000,
"typeid": 2
},
{
"count": "0",
"id": 19,
"namech": "價(jià)格指數(shù)",
"nameen": "JGZS",
"state": 1,
"timestamp": 1430984662000,
"typeid": 2
},
{
"count": "3",
"id": 20,
"namech": "人民生活",
"nameen": "RMSH",
"state": 1,
"timestamp": 1430984663000,
"typeid": 2
},
{
"count": "0",
"id": 21,
"namech": "財(cái)政",
"nameen": "CZ",
"state": 1,
"timestamp": 1430984663000,
"typeid": 2
},
{
"count": "0",
"id": 22,
"namech": "資源和環(huán)境",
"nameen": "ZYHHJ",
"state": 1,
"timestamp": 1430984664000,
"typeid": 2
},
{
"count": "1",
"id": 23,
"namech": "能源",
"nameen": "NY",
"state": 1,
"timestamp": 1430984665000,
"typeid": 2
},
{
"count": "1",
"id": 24,
"namech": "農(nóng)業(yè)",
"nameen": "NY",
"state": 1,
"timestamp": 1430984667000,
"typeid": 2
},
{
"count": "1",
"id": 25,
"namech": "工業(yè)",
"nameen": "GY",
"state": 1,
"timestamp": 1430984668000,
"typeid": 2
},
{
"count": "1",
"id": 26,
"namech": "運(yùn)輸和郵電",
"nameen": "YSHYD",
"state": 1,
"timestamp": 1430984669000,
"typeid": 2
},
{
"count": "1",
"id": 27,
"namech": "批發(fā)和零售",
"nameen": "PFHLS",
"state": 1,
"timestamp": 1430984669000,
"typeid": 2
},
{
"count": "11",
"id": 28,
"namech": "Web服務(wù)API",
"nameen": "WebAPI",
"state": 1,
"timestamp": 1431574777000,
"typeid": 2
},
{
"count": "0",
"id": 58,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1431574748000,
"typeid": 2
}
],
"mark": 1,
"namech": "主題分類",
"nameen": "servertypeid",
"state": 1,
"timestamp": 1433822849000
},
{
"lscm": [
{
"count": "122",
"id": 29,
"namech": "全球",
"nameen": "QQ",
"state": 1,
"timestamp": 1430984671000,
"typeid": 3
},
{
"count": "13",
"id": 30,
"namech": "國家",
"nameen": "GJ",
"state": 1,
"timestamp": 1430984672000,
"typeid": 3
},
{
"count": "171",
"id": 31,
"namech": "省",
"nameen": "S",
"state": 1,
"timestamp": 1434334496000,
"typeid": 3
},
{
"count": "1101",
"id": 32,
"namech": "市縣",
"nameen": "SX",
"state": 1,
"timestamp": 1430984674000,
"typeid": 3
},
{
"count": "0",
"id": 33,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1430984675000,
"typeid": 3
}
],
"mark": 1,
"namech": "覆蓋區(qū)域",
"nameen": "districtid",
"state": 1,
"timestamp": 1433822848000
},
{
"lscm": [
{
"count": "1413",
"id": 34,
"namech": "CGCS2000",
"nameen": "CGCS2000",
"state": 1,
"timestamp": 1430984676000,
"typeid": 4
},
{
"count": "16",
"id": 35,
"namech": "WGS84",
"nameen": "WGS84",
"state": 1,
"timestamp": 1430984695000,
"typeid": 4
},
{
"count": "0",
"id": 36,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1430984677000,
"typeid": 4
}
],
"mark": 1,
"namech": "坐標(biāo)系",
"nameen": "coordinatesystemid",
"state": 1,
"timestamp": 1433822847000
},
{
"lscm": [
{
"count": "1396",
"id": 37,
"namech": "經(jīng)緯度",
"nameen": "JWD",
"state": 1,
"timestamp": 1430984678000,
"typeid": 5
},
{
"count": "33",
"id": 38,
"namech": "Web墨卡托",
"nameen": "MKT",
"state": 1,
"timestamp": 1430984678000,
"typeid": 5
},
{
"count": "0",
"id": 39,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1430984679000,
"typeid": 5
}
],
"mark": 1,
"namech": "投影類型",
"nameen": "projectionid",
"state": 1,
"timestamp": 1433822846000
},
{
"lscm": [
{
"count": "1399",
"id": 42,
"namech": "公開",
"nameen": "GK",
"state": 1,
"timestamp": 1430984680000,
"typeid": 7
},
{
"count": "30",
"id": 43,
"namech": "授權(quán)",
"nameen": "SQ",
"state": 1,
"timestamp": 1430984683000,
"typeid": 7
}
],
"mark": 1,
"namech": "使用權(quán)限",
"nameen": "limitsid",
"state": 1,
"timestamp": 1433822843000
},
{
"lscm": [
{
"count": "1062",
"id": 44,
"namech": "大于一年",
"nameen": "DYYN",
"state": 1,
"timestamp": 1430984684000,
"typeid": 8
},
{
"count": "337",
"id": 45,
"namech": "一年",
"nameen": "TN",
"state": 1,
"timestamp": 1430984683000,
"typeid": 8
},
{
"count": "20",
"id": 47,
"namech": "實(shí)時(shí)",
"nameen": "SS",
"state": 1,
"timestamp": 1430984681000,
"typeid": 8
},
{
"count": "7",
"id": 48,
"namech": "其他",
"nameen": "QT",
"state": 1,
"timestamp": 1431336067000,
"typeid": 8
}
],
"mark": 1,
"namech": "更新周期",
"nameen": "upcycle",
"state": 1,
"timestamp": 1430881256000
},
{
"mark": 1,
"namech": "服務(wù)機(jī)構(gòu)",
"nameen": "unit",
"state": 1,
"timestamp": 1433822842000,
"units": [
{
"count": "11",
"unit": "Esri，Esri中國"
},
{
"count": "3",
"unit": "阿壩藏族羌族自治州城鄉(xiāng)規(guī)劃建設(shè)和住房保障局"
},
{
"count": "1",
"unit": "鞍山市規(guī)劃局"
},
{
"count": "12",
"unit": "安徽省第三測繪院"
},
{
"count": "8",
"unit": "安徽省第一測繪院"
},
{
"count": "12",
"unit": "安徽省基礎(chǔ)測繪信息中心"
},
{
"count": "4",
"unit": "安徽省蕪湖市國土資源局"
},
{
"count": "4",
"unit": "安吉縣測繪與地理信息局"
},
{
"count": "4",
"unit": "安丘市國土資源局"
},
{
"count": "4",
"unit": "霸州市國土資源局"
},
{
"count": "4",
"unit": "百色市測繪地理信息局"
},
{
"count": "4",
"unit": "北京市測繪設(shè)計(jì)研究院"
},
{
"count": "5",
"unit": "濱州市國土資源局"
},
{
"count": "4",
"unit": "博興縣國土資源局"
},
{
"count": "5",
"unit": "蒼南縣測繪與地理信息局"
},
{
"count": "4",
"unit": "滄州市國土資源局"
},
{
"count": "4",
"unit": "昌樂縣國土資源局"
},
{
"count": "4",
"unit": "昌邑市國土資源局"
},
{
"count": "4",
"unit": "常山縣測繪與地理信息局"
},
{
"count": "3",
"unit": "常州市國土資源局"
},
{
"count": "4",
"unit": "長興縣測繪與地理信息局"
},
{
"count": "5",
"unit": "潮州市國土資源局"
},
{
"count": "4",
"unit": "成都市規(guī)劃管理局"
},
{
"count": "4",
"unit": "承德市國土資源局"
},
{
"count": "4",
"unit": "滁州市國土資源和房產(chǎn)管理局"
},
{
"count": "4",
"unit": "淳安縣住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "5",
"unit": "慈溪市規(guī)劃局"
},
{
"count": "4",
"unit": "大連市測繪研究院"
},
{
"count": "8",
"unit": "大慶市城鄉(xiāng)規(guī)劃局"
},
{
"count": "4",
"unit": "德清縣地理信息中心"
},
{
"count": "5",
"unit": "德州市國土資源局"
},
{
"count": "4",
"unit": "東陽市測繪與地理信息局"
},
{
"count": "5",
"unit": "東營市墾利區(qū)國土資源局"
},
{
"count": "4",
"unit": "東莞市國土資源局"
},
{
"count": "4",
"unit": "奉化市規(guī)劃局"
},
{
"count": "24",
"unit": "福建省測繪地理信息局"
},
{
"count": "2",
"unit": "福建省基礎(chǔ)地理信息中心"
},
{
"count": "11",
"unit": "福州市“數(shù)字福州”建設(shè)領(lǐng)導(dǎo)小組辦公室"
},
{
"count": "2",
"unit": "撫順市地理信息局"
},
{
"count": "5",
"unit": "阜新市測繪地理信息局"
},
{
"count": "13",
"unit": "甘肅省測繪地理信息局"
},
{
"count": "6",
"unit": "贛州市國土資源局"
},
{
"count": "3",
"unit": "高密市國土資源局"
},
{
"count": "3",
"unit": "固原市國土資源局"
},
{
"count": "4",
"unit": "廣東省國土資源技術(shù)中心"
},
{
"count": "4",
"unit": "廣西壯族自治區(qū)測繪地理信息局"
},
{
"count": "2",
"unit": "廣西壯族自治區(qū)地圖院"
},
{
"count": "1",
"unit": "廣西壯族自治區(qū)基礎(chǔ)地理信息中心"
},
{
"count": "3",
"unit": "廣元市測繪地理信息局"
},
{
"count": "4",
"unit": "桂林市測繪地理信息局"
},
{
"count": "4",
"unit": "貴港市測繪地理信息局"
},
{
"count": "29",
"unit": "國家測繪地理信息局海南基礎(chǔ)地理信息中心"
},
{
"count": "39",
"unit": "國家測繪地理信息局四川基礎(chǔ)地理信息中心"
},
{
"count": "39",
"unit": "國家基礎(chǔ)地理信息中心"
},
{
"count": "10",
"unit": "哈爾濱市勘察測繪研究院"
},
{
"count": "4",
"unit": "海寧市測繪與地理信息局"
},
{
"count": "4",
"unit": "海鹽縣住房和城鄉(xiāng)規(guī)劃建設(shè)局"
},
{
"count": "5",
"unit": "海陽市國土資源局"
},
{
"count": "4",
"unit": "邯鄲市國土資源局"
},
{
"count": "2",
"unit": "漢中市測繪院"
},
{
"count": "4",
"unit": "杭州市地理信息中心"
},
{
"count": "4",
"unit": "杭州市規(guī)劃局富陽規(guī)劃分局"
},
{
"count": "4",
"unit": "杭州市蕭山區(qū)測繪管理中心"
},
{
"count": "5",
"unit": "杭州市余杭區(qū)住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "4",
"unit": "合肥市國土資源局"
},
{
"count": "5",
"unit": "河北省保定市國土資源局"
},
{
"count": "4",
"unit": "河北省地理信息局"
},
{
"count": "15",
"unit": "河南省測繪地理信息局"
},
{
"count": "20",
"unit": "河南省測繪工程院"
},
{
"count": "4",
"unit": "河南省基礎(chǔ)地理信息中心"
},
{
"count": "1",
"unit": "鶴壁"
},
{
"count": "9",
"unit": "鶴壁市國土資源局"
},
{
"count": "4",
"unit": "鶴崗市城鄉(xiāng)規(guī)劃局"
},
{
"count": "4",
"unit": "賀州市國土資源局"
},
{
"count": "4",
"unit": "黑河市城鄉(xiāng)規(guī)劃局"
},
{
"count": "4",
"unit": "黑龍江基礎(chǔ)地理信息中心"
},
{
"count": "5",
"unit": "衡水市國土資源局"
},
{
"count": "4",
"unit": "湖北省天地圖科技有限公司"
},
{
"count": "11",
"unit": "湖南省第三測繪院"
},
{
"count": "4",
"unit": "湖州市測繪與地理信息局"
},
{
"count": "4",
"unit": "淮安市國土資源局"
},
{
"count": "4",
"unit": "淮南市國土資源局"
},
{
"count": "1",
"unit": "惠州市國土資源局"
},
{
"count": "4",
"unit": "雞西市城鄉(xiāng)規(guī)劃局"
},
{
"count": "3",
"unit": "吉林省基礎(chǔ)地理信息中心"
},
{
"count": "4",
"unit": "濟(jì)南市規(guī)劃局"
},
{
"count": "4",
"unit": "濟(jì)寧市國土資源局"
},
{
"count": "5",
"unit": "濟(jì)源市測繪地理信息局"
},
{
"count": "5",
"unit": "嘉善縣測繪與地理信息局"
},
{
"count": "8",
"unit": "嘉興市測繪與地理信息局"
},
{
"count": "7",
"unit": "嘉興市規(guī)劃設(shè)計(jì)研究院有限公司"
},
{
"count": "4",
"unit": "建德市測繪和地理信息局"
},
{
"count": "5",
"unit": "江山市測繪與地理信息局"
},
{
"count": "5",
"unit": "江蘇省測繪地理信息局"
},
{
"count": "23",
"unit": "江蘇省測繪工程院"
},
{
"count": "4",
"unit": "江蘇省基礎(chǔ)地理信息中心"
},
{
"count": "9",
"unit": "江西省測繪應(yīng)急保障服務(wù)中心"
},
{
"count": "49",
"unit": "江西省基礎(chǔ)地理信息中心"
},
{
"count": "5",
"unit": "焦作市國土資源局"
},
{
"count": "4",
"unit": "金華市測繪院"
},
{
"count": "5",
"unit": "晉城市國土資源局"
},
{
"count": "1",
"unit": "晉中是國土資源局測管科"
},
{
"count": "2",
"unit": "晉中市國土局測管科"
},
{
"count": "1",
"unit": "井陘縣國土局"
},
{
"count": "4",
"unit": "景寧畬族自治縣住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "4",
"unit": "開化縣規(guī)劃局"
},
{
"count": "3",
"unit": "克拉瑪依天地圖有限公司"
},
{
"count": "3",
"unit": "萊蕪市國土資源局"
},
{
"count": "4",
"unit": "萊陽市國土資源局"
},
{
"count": "5",
"unit": "萊州市國土資源局"
},
{
"count": "4",
"unit": "蘭溪市住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "4",
"unit": "廊坊市國土資源局（地理信息局）"
},
{
"count": "14",
"unit": "樂清市測繪與地理信息局"
},
{
"count": "4",
"unit": "麗水市測繪中心"
},
{
"count": "4",
"unit": "聊城市國土資源局"
},
{
"count": "4",
"unit": "遼寧省基礎(chǔ)地理信息中心"
},
{
"count": "4",
"unit": "臨海市測繪與地理信息局"
},
{
"count": "5",
"unit": "臨沂市測繪地理信息局"
},
{
"count": "4",
"unit": "臨朐縣國土資源局"
},
{
"count": "4",
"unit": "柳州市國土資源局"
},
{
"count": "4",
"unit": "六安市國土資源局"
},
{
"count": "4",
"unit": "龍口市國土資源局"
},
{
"count": "4",
"unit": "龍游縣規(guī)劃局（測繪與地理信息局）"
},
{
"count": "4",
"unit": "隆化縣國土資源局"
},
{
"count": "5",
"unit": "洛陽市國土資源局"
},
{
"count": "3",
"unit": "眉山市測繪地理信息局"
},
{
"count": "4",
"unit": "牡丹江市規(guī)劃局"
},
{
"count": "4",
"unit": "南京市規(guī)劃局"
},
{
"count": "5",
"unit": "南寧市國土資源局信息中心"
},
{
"count": "4",
"unit": "南通市國土資源局"
},
{
"count": "3",
"unit": "內(nèi)江市測繪地理信息局"
},
{
"count": "7",
"unit": "內(nèi)蒙古自治區(qū)基礎(chǔ)地理信息中心"
},
{
"count": "17",
"unit": "寧波市測繪與地理信息局"
},
{
"count": "1",
"unit": "寧波市奉化區(qū)測繪院"
},
{
"count": "5",
"unit": "寧波市規(guī)劃局北侖分局"
},
{
"count": "7",
"unit": "寧波市規(guī)劃局鎮(zhèn)海分局"
},
{
"count": "5",
"unit": "寧波市規(guī)劃局鄞州分局"
},
{
"count": "13",
"unit": "寧德市國土資源局"
},
{
"count": "6",
"unit": "寧?？h規(guī)劃局"
},
{
"count": "11",
"unit": "寧夏國土資源地理信息中心"
},
{
"count": "5",
"unit": "寧夏回族自治區(qū)國土測繪院"
},
{
"count": "4",
"unit": "攀枝花市地理信息中心"
},
{
"count": "4",
"unit": "盤錦市測繪地理信息局"
},
{
"count": "6",
"unit": "磐安縣規(guī)劃局"
},
{
"count": "4",
"unit": "蓬萊市國土資源局"
},
{
"count": "10",
"unit": "平頂山市測繪地理信息局"
},
{
"count": "5",
"unit": "平陽縣測繪與地理信息局"
},
{
"count": "4",
"unit": "浦江縣測繪與地理信息局"
},
{
"count": "4",
"unit": "棲霞市國土資源局"
},
{
"count": "4",
"unit": "七臺(tái)河市城鄉(xiāng)規(guī)劃局"
},
{
"count": "4",
"unit": "齊齊哈爾市國土資源勘測規(guī)劃設(shè)計(jì)院"
},
{
"count": "4",
"unit": "欽州市國土資源局"
},
{
"count": "4",
"unit": "秦皇島市國土資源局"
},
{
"count": "4",
"unit": "青海省基礎(chǔ)地理信息中心"
},
{
"count": "4",
"unit": "青田縣住房和城鄉(xiāng)規(guī)劃建設(shè)局"
},
{
"count": "4",
"unit": "青州市國土資源局"
},
{
"count": "4",
"unit": "慶元縣住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "5",
"unit": "日照市國土資源局"
},
{
"count": "4",
"unit": "榮成市國土資源局"
},
{
"count": "4",
"unit": "乳山市國土資源局"
},
{
"count": "5",
"unit": "瑞安市測繪與地理信息局"
},
{
"count": "5",
"unit": "三門峽市國土資源局"
},
{
"count": "4",
"unit": "三門縣測繪與地理信息局"
},
{
"count": "2",
"unit": "三亞市國土環(huán)境資源信息中心"
},
{
"count": "4",
"unit": "山東省東營市廣饒縣國土資源局"
},
{
"count": "4",
"unit": "山東省東營市國土資源局"
},
{
"count": "4",
"unit": "山東省東營市國土資源局河口分局"
},
{
"count": "4",
"unit": "山東省東營市利津縣國土資源局"
},
{
"count": "5",
"unit": "山東省國土測繪院"
},
{
"count": "3",
"unit": "山東省青島市國土資源和房屋管理局"
},
{
"count": "4",
"unit": "山東省濰坊市國土資源局"
},
{
"count": "4",
"unit": "山東省淄博市國土資源局"
},
{
"count": "8",
"unit": "山西省綜合地理信息中心"
},
{
"count": "4",
"unit": "陜西省基礎(chǔ)地理信息中心"
},
{
"count": "1",
"unit": "陜西省西安市信息中心"
},
{
"count": "6",
"unit": "上海市測繪院"
},
{
"count": "1",
"unit": "紹興市規(guī)劃就上虞區(qū)分局"
},
{
"count": "5",
"unit": "紹興市規(guī)劃局"
},
{
"count": "4",
"unit": "紹興市規(guī)劃局上虞區(qū)分局"
},
{
"count": "4",
"unit": "紹興市柯橋區(qū)測繪和地理信息局"
},
{
"count": "5",
"unit": "深圳市規(guī)劃國土房產(chǎn)信息中心"
},
{
"count": "3",
"unit": "沈陽市規(guī)劃和國土資源局"
},
{
"count": "5",
"unit": "石家莊市國土資源局"
},
{
"count": "1",
"unit": "壽光國土局"
},
{
"count": "4",
"unit": "壽光市國土局"
},
{
"count": "4",
"unit": "雙鴨山市住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "6",
"unit": "朔州市國土資源局"
},
{
"count": "12",
"unit": "四川省基礎(chǔ)地理信息中心"
},
{
"count": "1",
"unit": "四川省基礎(chǔ)地理信心中心"
},
{
"count": "4",
"unit": "松陽縣測繪與地理信息局"
},
{
"count": "4",
"unit": "蘇州市國土資源局"
},
{
"count": "4",
"unit": "宿遷市國土資源局"
},
{
"count": "4",
"unit": "綏化市住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "4",
"unit": "遂昌縣住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "4",
"unit": "臺(tái)州市測繪與地理信息局"
},
{
"count": "4",
"unit": "泰安市國土資源局"
},
{
"count": "5",
"unit": "泰順縣測繪與地理信息局"
},
{
"count": "4",
"unit": "泰州市國土資源局"
},
{
"count": "5",
"unit": "太原市國土資源局"
},
{
"count": "10",
"unit": "唐山市國土資源局"
},
{
"count": "5",
"unit": "天津市測繪院"
},
{
"count": "4",
"unit": "天門市城鄉(xiāng)規(guī)劃局、湖北省地圖院"
},
{
"count": "4",
"unit": "天臺(tái)縣住房和城鄉(xiāng)建設(shè)規(guī)劃局"
},
{
"count": "4",
"unit": "桐廬縣測繪與地理信息局"
},
{
"count": "4",
"unit": "桐鄉(xiāng)市測繪與地理信息局"
},
{
"count": "3",
"unit": "威海市國土資源局"
},
{
"count": "4",
"unit": "溫嶺市測繪與地理信息局"
},
{
"count": "5",
"unit": "溫州市洞頭區(qū)測繪與地理信息局"
},
{
"count": "5",
"unit": "溫州市規(guī)劃局(溫州市測繪與地理信息局)"
},
{
"count": "5",
"unit": "文成縣測繪與地理信息局"
},
{
"count": "4",
"unit": "文登區(qū)國土資源局"
},
{
"count": "4",
"unit": "無錫市國土資源局"
},
{
"count": "3",
"unit": "梧州市測繪地理信息局"
},
{
"count": "3",
"unit": "武漢市國土資源和規(guī)劃信息中心"
},
{
"count": "2",
"unit": "武義縣測繪與地理信息局"
},
{
"count": "2",
"unit": "武義縣測繪與地理信息中心"
},
{
"count": "4",
"unit": "五大連池風(fēng)景名勝區(qū)自然保護(hù)區(qū)管理委員會(huì)"
},
{
"count": "4",
"unit": "五蓮縣國土資源局"
},
{
"count": "11",
"unit": "廈門市國土資源與房產(chǎn)管理局"
},
{
"count": "5",
"unit": "仙居縣測繪與地理信息局"
},
{
"count": "5",
"unit": "象山縣規(guī)劃局"
},
{
"count": "4",
"unit": "孝義市國土資源局"
},
{
"count": "4",
"unit": "新昌縣測繪與地理信息局"
},
{
"count": "1",
"unit": "新昌縣住房和城鄉(xiāng)建設(shè)局（新昌縣測繪與地理信息局）"
},
{
"count": "5",
"unit": "新疆維吾爾自治區(qū)測繪檔案資料館"
},
{
"count": "5",
"unit": "新沂市國土資源局"
},
{
"count": "6",
"unit": "忻州市國土資源局"
},
{
"count": "4",
"unit": "邢臺(tái)市國土資源局"
},
{
"count": "6",
"unit": "徐州市國土資源局"
},
{
"count": "5",
"unit": "煙臺(tái)市國土資源局"
},
{
"count": "4",
"unit": "鹽城市大豐區(qū)國土資源局"
},
{
"count": "6",
"unit": "揚(yáng)州市國土資源局"
},
{
"count": "4",
"unit": "陽泉市國土資源局"
},
{
"count": "4",
"unit": "伊春市城鄉(xiāng)規(guī)劃局"
},
{
"count": "6",
"unit": "伊寧市國土資源局"
},
{
"count": "3",
"unit": "宜賓市測繪地理信息局"
},
{
"count": "8",
"unit": "義烏市勘測設(shè)計(jì)研究院"
},
{
"count": "5",
"unit": "永嘉縣測繪與地理信息局"
},
{
"count": "5",
"unit": "永康市測繪與地理信息局"
},
{
"count": "5",
"unit": "榆林市信息中心"
},
{
"count": "5",
"unit": "余姚市測繪與地理信息局"
},
{
"count": "5",
"unit": "玉環(huán)縣住房和城鄉(xiāng)建設(shè)規(guī)劃局（玉環(huán)縣測繪與地理信息局）"
},
{
"count": "4",
"unit": "云和縣住房和城鄉(xiāng)建設(shè)局"
},
{
"count": "1",
"unit": "云南省地圖院"
},
{
"count": "5",
"unit": "棗莊市國土資源局"
},
{
"count": "4",
"unit": "漳州市國土資源局"
},
{
"count": "1",
"unit": "張家口國土資源局"
},
{
"count": "3",
"unit": "張家口市國土資源局"
},
{
"count": "4",
"unit": "肇慶市國土資源局"
},
{
"count": "4",
"unit": "浙江省地理空間數(shù)據(jù)交換中心"
},
{
"count": "4",
"unit": "浙江省臨安市測繪與地理信息局"
},
{
"count": "4",
"unit": "浙江省龍泉市測繪與地理信息局"
},
{
"count": "1",
"unit": "浙江省紹興市柯橋區(qū)測繪和地理信息局"
},
{
"count": "4",
"unit": "鎮(zhèn)江市國土資源局"
},
{
"count": "5",
"unit": "中山市國土資源局"
},
{
"count": "7",
"unit": "重慶市地理信息中心"
},
{
"count": "9",
"unit": "舟山市地理信息中心"
},
{
"count": "4",
"unit": "諸城市國土資源局"
},
{
"count": "5",
"unit": "諸暨市地理信息中心"
},
{
"count": "2",
"unit": "資陽市城鄉(xiāng)規(guī)劃局"
},
{
"count": "4",
"unit": "鄒平縣國土資源局"
},
{
"count": "4",
"unit": "嵊州市住房和城鄉(xiāng)建設(shè)局（嵊州市測繪和地理信息局）"
},
{
"count": "1",
"unit": "嵊州天地圖電子地圖注記"
},
{
"count": "4",
"unit": "嵊泗縣測繪與地理信息局"
},
{
"count": "4",
"unit": "衢州市測繪與地理信息局"
},
{
"count": "3",
"unit": "瀘州市城市建設(shè)信息管理中心"
},
{
"count": "4",
"unit": "縉云縣測繪與地理信息局"
},
{
"count": "5",
"unit": "滕州市國土資源局"
}
]
}
],
我們利用v-for循環(huán)將數(shù)據(jù)展現(xiàn)出來
<div id="main_left" style="width:35%;float:left">
<div class="panel" v-for="(item,index1) in tableData" :key="index1">
<div class="title">
{{item.namech}}
</div>
<div class="content" v-for="(ele,index) in item.lscm" :key="index" v-if="index<5" @click="changebq(index1,ele.namech,index,ele.state)" style="cursor:pointer">
{{ele.namech}}
<!--<el-button>{{show}} +'show'+{{index1}}+ {{index}}</el-button>-->
<!--<i class="el-icon-error" v-if="show==index" style="color:#337AB7;float:right;margin-right:15px"></i>-->
<i class="el-icon-error" v-if="ele.state==0" style="color:#337AB7;float:right;margin-right:15px"></i>
</div>
<div class="content" v-for="(ele,index) in item.lscm" :key="index" v-if="index>=5 && item.mark==0" @click="changebq(index1,ele.namech,index,ele.state)" style="cursor:pointer">
{{ele.namech}}
<!--<el-button>{{show}} +'show'+{{index1}}+ {{index}}</el-button>-->
<!--<i class="el-icon-error" v-if="show==index" style="color:#337AB7;float:right;margin-right:15px"></i>-->
<i class="el-icon-error" v-if="ele.state==0" style="color:#337AB7;float:right;margin-right:15px"></i>
</div>
<div class="footer" v-if="item.mark==1&&item.lscm&&item.lscm.length>5" @click="xsqb(index1,item.mark)">
顯示全部
</div>
<div class="footer" v-if="item.mark==0"@click='shouqi(index1,item.mark)'>
收起
</div>
</div>
</div>
changebq(index1,val, index,state) {
// console.log(index, "index")
console.log(val, "val")
console.log(state, "state")
// state=0
console.log(state, "changestate")
this.tableData[index1].lscm[index].state = state==0?1:0;
if (this.checkList.indexOf(val) > -1) {
let index = this.checkList.indexOf(val)
this.checkList.splice(index, 1)
} else {
this.checkList.push(val)
}
console.log(this.checkList, 88)
},
xsqb(index,mark){
this.tableData[index].mark=0
},
//收起
shouqi(index,mark){
this.tableData[index].mark=1
}
總結(jié)
以上所述是小編給大家介紹的Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JS如何操作DOM基于表格動(dòng)態(tài)展示數(shù)據(jù)
- vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能
- mockjs+vue頁面直接展示數(shù)據(jù)的方法
- json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法
- jQuery插件jsonview展示json數(shù)據(jù)
- Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù)
- 使用fastjson中的JSONPath處理json數(shù)據(jù)的方法
- 如何處理后臺(tái)向前臺(tái)傳遞的json數(shù)據(jù)
- 對(duì)pandas處理json數(shù)據(jù)的方法詳解
- ajax請(qǐng)求后臺(tái)接口數(shù)據(jù)與返回值處理js的實(shí)例講解
- ajax處理返回的json格式數(shù)據(jù)方法
- js前端對(duì)于大量數(shù)據(jù)的展示方式及處理方法
相關(guān)文章
Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過來的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08
Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
npm如何更新VUE package.json文件中依賴的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
npm ERR! code 128的錯(cuò)誤問題解決方法
這篇文章主要介紹了解決npm ERR! code 128的錯(cuò)誤問題,本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue中音頻wavesurfer.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
vue實(shí)現(xiàn)tagsview多頁簽導(dǎo)航功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)tagsview多頁簽導(dǎo)航功能,本文梳理了一下vue-element-admin項(xiàng)目實(shí)現(xiàn)多頁簽功能的整體步驟，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue項(xiàng)目中封裝axios的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請(qǐng)求，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解
今天小編就為大家分享一篇Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue npm install 安裝某個(gè)指定的版本操作
這篇文章主要介紹了vue npm install 安裝某個(gè)指定的版本操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08