如圖所示，當我們獲取到數據后每個欄都只顯示5條，多出的部分隱藏，點擊顯示全部將數據都展現出來，如圖所示
首先我們的數據類型是這樣的，
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": "地名搜索服務", "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": "路徑規劃服務", "nameen": "LJGHFW", "state": 1, "timestamp": 1433728809000, "typeid": 1 }, { "count": "0", "id": 59, "namech": "其他", "nameen": "QT", "state": 1, "timestamp": 1433728776000, "typeid": 1 } ], "mark": 1, "namech": "服務類型", "nameen": "formatid", "state": 0, "timestamp": 1430899276000 }, { "lscm": [ { "count": "1393", "id": 12, "namech": "基礎地理框架數據", "nameen": "JCDLKJSJ", "state": 1, "timestamp": 1430984656000, "typeid": 2 }, { "count": "1", "id": 13, "namech": "機關單位", "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": "國民經濟核算", "nameen": "GMJJHS", "state": 1, "timestamp": 1430984660000, "typeid": 2 }, { "count": "1", "id": 18, "namech": "就業和工資", "nameen": "JYHGZ", "state": 1, "timestamp": 1430984661000, "typeid": 2 }, { "count": "0", "id": 19, "namech": "價格指數", "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": "財政", "nameen": "CZ", "state": 1, "timestamp": 1430984663000, "typeid": 2 }, { "count": "0", "id": 22, "namech": "資源和環境", "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": "農業", "nameen": "NY", "state": 1, "timestamp": 1430984667000, "typeid": 2 }, { "count": "1", "id": 25, "namech": "工業", "nameen": "GY", "state": 1, "timestamp": 1430984668000, "typeid": 2 }, { "count": "1", "id": 26, "namech": "運輸和郵電", "nameen": "YSHYD", "state": 1, "timestamp": 1430984669000, "typeid": 2 }, { "count": "1", "id": 27, "namech": "批發和零售", "nameen": "PFHLS", "state": 1, "timestamp": 1430984669000, "typeid": 2 }, { "count": "11", "id": 28, "namech": "Web服務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": "覆蓋區域", "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": "坐標系", "nameen": "coordinatesystemid", "state": 1, "timestamp": 1433822847000 }, { "lscm": [ { "count": "1396", "id": 37, "namech": "經緯度", "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": "授權", "nameen": "SQ", "state": 1, "timestamp": 1430984683000, "typeid": 7 } ], "mark": 1, "namech": "使用權限", "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": "實時", "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": "服務機構", "nameen": "unit", "state": 1, "timestamp": 1433822842000, "units": [ { "count": "11", "unit": "Esri，Esri中國" }, { "count": "3", "unit": "阿壩藏族羌族自治州城鄉規劃建設和住房保障局" }, { "count": "1", "unit": "鞍山市規劃局" }, { "count": "12", "unit": "安徽省第三測繪院" }, { "count": "8", "unit": "安徽省第一測繪院" }, { "count": "12", "unit": "安徽省基礎測繪信息中心" }, { "count": "4", "unit": "安徽省蕪湖市國土資源局" }, { "count": "4", "unit": "安吉縣測繪與地理信息局" }, { "count": "4", "unit": "安丘市國土資源局" }, { "count": "4", "unit": "霸州市國土資源局" }, { "count": "4", "unit": "百色市測繪地理信息局" }, { "count": "4", "unit": "北京市測繪設計研究院" }, { "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": "成都市規劃管理局" }, { "count": "4", "unit": "承德市國土資源局" }, { "count": "4", "unit": "滁州市國土資源和房產管理局" }, { "count": "4", "unit": "淳安縣住房和城鄉建設局" }, { "count": "5", "unit": "慈溪市規劃局" }, { "count": "4", "unit": "大連市測繪研究院" }, { "count": "8", "unit": "大慶市城鄉規劃局" }, { "count": "4", "unit": "德清縣地理信息中心" }, { "count": "5", "unit": "德州市國土資源局" }, { "count": "4", "unit": "東陽市測繪與地理信息局" }, { "count": "5", "unit": "東營市墾利區國土資源局" }, { "count": "4", "unit": "東莞市國土資源局" }, { "count": "4", "unit": "奉化市規劃局" }, { "count": "24", "unit": "福建省測繪地理信息局" }, { "count": "2", "unit": "福建省基礎地理信息中心" }, { "count": "11", "unit": "福州市“數字福州”建設領導小組辦公室" }, { "count": "2", "unit": "撫順市地理信息局" }, { "count": "5", "unit": "阜新市測繪地理信息局" }, { "count": "13", "unit": "甘肅省測繪地理信息局" }, { "count": "6", "unit": "贛州市國土資源局" }, { "count": "3", "unit": "高密市國土資源局" }, { "count": "3", "unit": "固原市國土資源局" }, { "count": "4", "unit": "廣東省國土資源技術中心" }, { "count": "4", "unit": "廣西壯族自治區測繪地理信息局" }, { "count": "2", "unit": "廣西壯族自治區地圖院" }, { "count": "1", "unit": "廣西壯族自治區基礎地理信息中心" }, { "count": "3", "unit": "廣元市測繪地理信息局" }, { "count": "4", "unit": "桂林市測繪地理信息局" }, { "count": "4", "unit": "貴港市測繪地理信息局" }, { "count": "29", "unit": "國家測繪地理信息局海南基礎地理信息中心" }, { "count": "39", "unit": "國家測繪地理信息局四川基礎地理信息中心" }, { "count": "39", "unit": "國家基礎地理信息中心" }, { "count": "10", "unit": "哈爾濱市勘察測繪研究院" }, { "count": "4", "unit": "海寧市測繪與地理信息局" }, { "count": "4", "unit": "海鹽縣住房和城鄉規劃建設局" }, { "count": "5", "unit": "海陽市國土資源局" }, { "count": "4", "unit": "邯鄲市國土資源局" }, { "count": "2", "unit": "漢中市測繪院" }, { "count": "4", "unit": "杭州市地理信息中心" }, { "count": "4", "unit": "杭州市規劃局富陽規劃分局" }, { "count": "4", "unit": "杭州市蕭山區測繪管理中心" }, { "count": "5", "unit": "杭州市余杭區住房和城鄉建設局" }, { "count": "4", "unit": "合肥市國土資源局" }, { "count": "5", "unit": "河北省保定市國土資源局" }, { "count": "4", "unit": "河北省地理信息局" }, { "count": "15", "unit": "河南省測繪地理信息局" }, { "count": "20", "unit": "河南省測繪工程院" }, { "count": "4", "unit": "河南省基礎地理信息中心" }, { "count": "1", "unit": "鶴壁" }, { "count": "9", "unit": "鶴壁市國土資源局" }, { "count": "4", "unit": "鶴崗市城鄉規劃局" }, { "count": "4", "unit": "賀州市國土資源局" }, { "count": "4", "unit": "黑河市城鄉規劃局" }, { "count": "4", "unit": "黑龍江基礎地理信息中心" }, { "count": "5", "unit": "衡水市國土資源局" }, { "count": "4", "unit": "湖北省天地圖科技有限公司" }, { "count": "11", "unit": "湖南省第三測繪院" }, { "count": "4", "unit": "湖州市測繪與地理信息局" }, { "count": "4", "unit": "淮安市國土資源局" }, { "count": "4", "unit": "淮南市國土資源局" }, { "count": "1", "unit": "惠州市國土資源局" }, { "count": "4", "unit": "雞西市城鄉規劃局" }, { "count": "3", "unit": "吉林省基礎地理信息中心" }, { "count": "4", "unit": "濟南市規劃局" }, { "count": "4", "unit": "濟寧市國土資源局" }, { "count": "5", "unit": "濟源市測繪地理信息局" }, { "count": "5", "unit": "嘉善縣測繪與地理信息局" }, { "count": "8", "unit": "嘉興市測繪與地理信息局" }, { "count": "7", "unit": "嘉興市規劃設計研究院有限公司" }, { "count": "4", "unit": "建德市測繪和地理信息局" }, { "count": "5", "unit": "江山市測繪與地理信息局" }, { "count": "5", "unit": "江蘇省測繪地理信息局" }, { "count": "23", "unit": "江蘇省測繪工程院" }, { "count": "4", "unit": "江蘇省基礎地理信息中心" }, { "count": "9", "unit": "江西省測繪應急保障服務中心" }, { "count": "49", "unit": "江西省基礎地理信息中心" }, { "count": "5", "unit": "焦作市國土資源局" }, { "count": "4", "unit": "金華市測繪院" }, { "count": "5", "unit": "晉城市國土資源局" }, { "count": "1", "unit": "晉中是國土資源局測管科" }, { "count": "2", "unit": "晉中市國土局測管科" }, { "count": "1", "unit": "井陘縣國土局" }, { "count": "4", "unit": "景寧畬族自治縣住房和城鄉建設局" }, { "count": "4", "unit": "開化縣規劃局" }, { "count": "3", "unit": "克拉瑪依天地圖有限公司" }, { "count": "3", "unit": "萊蕪市國土資源局" }, { "count": "4", "unit": "萊陽市國土資源局" }, { "count": "5", "unit": "萊州市國土資源局" }, { "count": "4", "unit": "蘭溪市住房和城鄉建設局" }, { "count": "4", "unit": "廊坊市國土資源局（地理信息局）" }, { "count": "14", "unit": "樂清市測繪與地理信息局" }, { "count": "4", "unit": "麗水市測繪中心" }, { "count": "4", "unit": "聊城市國土資源局" }, { "count": "4", "unit": "遼寧省基礎地理信息中心" }, { "count": "4", "unit": "臨海市測繪與地理信息局" }, { "count": "5", "unit": "臨沂市測繪地理信息局" }, { "count": "4", "unit": "臨朐縣國土資源局" }, { "count": "4", "unit": "柳州市國土資源局" }, { "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": "5", "unit": "南寧市國土資源局信息中心" }, { "count": "4", "unit": "南通市國土資源局" }, { "count": "3", "unit": "內江市測繪地理信息局" }, { "count": "7", "unit": "內蒙古自治區基礎地理信息中心" }, { "count": "17", "unit": "寧波市測繪與地理信息局" }, { "count": "1", "unit": "寧波市奉化區測繪院" }, { "count": "5", "unit": "寧波市規劃局北侖分局" }, { "count": "7", "unit": "寧波市規劃局鎮海分局" }, { "count": "5", "unit": "寧波市規劃局鄞州分局" }, { "count": "13", "unit": "寧德市國土資源局" }, { "count": "6", "unit": "寧?？h規劃局" }, { "count": "11", "unit": "寧夏國土資源地理信息中心" }, { "count": "5", "unit": "寧夏回族自治區國土測繪院" }, { "count": "4", "unit": "攀枝花市地理信息中心" }, { "count": "4", "unit": "盤錦市測繪地理信息局" }, { "count": "6", "unit": "磐安縣規劃局" }, { "count": "4", "unit": "蓬萊市國土資源局" }, { "count": "10", "unit": "平頂山市測繪地理信息局" }, { "count": "5", "unit": "平陽縣測繪與地理信息局" }, { "count": "4", "unit": "浦江縣測繪與地理信息局" }, { "count": "4", "unit": "棲霞市國土資源局" }, { "count": "4", "unit": "七臺河市城鄉規劃局" }, { "count": "4", "unit": "齊齊哈爾市國土資源勘測規劃設計院" }, { "count": "4", "unit": "欽州市國土資源局" }, { "count": "4", "unit": "秦皇島市國土資源局" }, { "count": "4", "unit": "青海省基礎地理信息中心" }, { "count": "4", "unit": "青田縣住房和城鄉規劃建設局" }, { "count": "4", "unit": "青州市國土資源局" }, { "count": "4", "unit": "慶元縣住房和城鄉建設局" }, { "count": "5", "unit": "日照市國土資源局" }, { "count": "4", "unit": "榮成市國土資源局" }, { "count": "4", "unit": "乳山市國土資源局" }, { "count": "5", "unit": "瑞安市測繪與地理信息局" }, { "count": "5", "unit": "三門峽市國土資源局" }, { "count": "4", "unit": "三門縣測繪與地理信息局" }, { "count": "2", "unit": "三亞市國土環境資源信息中心" }, { "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": "陜西省基礎地理信息中心" }, { "count": "1", "unit": "陜西省西安市信息中心" }, { "count": "6", "unit": "上海市測繪院" }, { "count": "1", "unit": "紹興市規劃就上虞區分局" }, { "count": "5", "unit": "紹興市規劃局" }, { "count": "4", "unit": "紹興市規劃局上虞區分局" }, { "count": "4", "unit": "紹興市柯橋區測繪和地理信息局" }, { "count": "5", "unit": "深圳市規劃國土房產信息中心" }, { "count": "3", "unit": "沈陽市規劃和國土資源局" }, { "count": "5", "unit": "石家莊市國土資源局" }, { "count": "1", "unit": "壽光國土局" }, { "count": "4", "unit": "壽光市國土局" }, { "count": "4", "unit": "雙鴨山市住房和城鄉建設局" }, { "count": "6", "unit": "朔州市國土資源局" }, { "count": "12", "unit": "四川省基礎地理信息中心" }, { "count": "1", "unit": "四川省基礎地理信心中心" }, { "count": "4", "unit": "松陽縣測繪與地理信息局" }, { "count": "4", "unit": "蘇州市國土資源局" }, { "count": "4", "unit": "宿遷市國土資源局" }, { "count": "4", "unit": "綏化市住房和城鄉建設局" }, { "count": "4", "unit": "遂昌縣住房和城鄉建設局" }, { "count": "4", "unit": "臺州市測繪與地理信息局" }, { "count": "4", "unit": "泰安市國土資源局" }, { "count": "5", "unit": "泰順縣測繪與地理信息局" }, { "count": "4", "unit": "泰州市國土資源局" }, { "count": "5", "unit": "太原市國土資源局" }, { "count": "10", "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": "5", "unit": "溫州市規劃局(溫州市測繪與地理信息局)" }, { "count": "5", "unit": "文成縣測繪與地理信息局" }, { "count": "4", "unit": "文登區國土資源局" }, { "count": "4", "unit": "無錫市國土資源局" }, { "count": "3", "unit": "梧州市測繪地理信息局" }, { "count": "3", "unit": "武漢市國土資源和規劃信息中心" }, { "count": "2", "unit": "武義縣測繪與地理信息局" }, { "count": "2", "unit": "武義縣測繪與地理信息中心" }, { "count": "4", "unit": "五大連池風景名勝區自然保護區管理委員會" }, { "count": "4", "unit": "五蓮縣國土資源局" }, { "count": "11", "unit": "廈門市國土資源與房產管理局" }, { "count": "5", "unit": "仙居縣測繪與地理信息局" }, { "count": "5", "unit": "象山縣規劃局" }, { "count": "4", "unit": "孝義市國土資源局" }, { "count": "4", "unit": "新昌縣測繪與地理信息局" }, { "count": "1", "unit": "新昌縣住房和城鄉建設局（新昌縣測繪與地理信息局）" }, { "count": "5", "unit": "新疆維吾爾自治區測繪檔案資料館" }, { "count": "5", "unit": "新沂市國土資源局" }, { "count": "6", "unit": "忻州市國土資源局" }, { "count": "4", "unit": "邢臺市國土資源局" }, { "count": "6", "unit": "徐州市國土資源局" }, { "count": "5", "unit": "煙臺市國土資源局" }, { "count": "4", "unit": "鹽城市大豐區國土資源局" }, { "count": "6", "unit": "揚州市國土資源局" }, { "count": "4", "unit": "陽泉市國土資源局" }, { "count": "4", "unit": "伊春市城鄉規劃局" }, { "count": "6", "unit": "伊寧市國土資源局" }, { "count": "3", "unit": "宜賓市測繪地理信息局" }, { "count": "8", "unit": "義烏市勘測設計研究院" }, { "count": "5", "unit": "永嘉縣測繪與地理信息局" }, { "count": "5", "unit": "永康市測繪與地理信息局" }, { "count": "5", "unit": "榆林市信息中心" }, { "count": "5", "unit": "余姚市測繪與地理信息局" }, { "count": "5", "unit": "玉環縣住房和城鄉建設規劃局（玉環縣測繪與地理信息局）" }, { "count": "4", "unit": "云和縣住房和城鄉建設局" }, { "count": "1", "unit": "云南省地圖院" }, { "count": "5", "unit": "棗莊市國土資源局" }, { "count": "4", "unit": "漳州市國土資源局" }, { "count": "1", "unit": "張家口國土資源局" }, { "count": "3", "unit": "張家口市國土資源局" }, { "count": "4", "unit": "肇慶市國土資源局" }, { "count": "4", "unit": "浙江省地理空間數據交換中心" }, { "count": "4", "unit": "浙江省臨安市測繪與地理信息局" }, { "count": "4", "unit": "浙江省龍泉市測繪與地理信息局" }, { "count": "1", "unit": "浙江省紹興市柯橋區測繪和地理信息局" }, { "count": "4", "unit": "鎮江市國土資源局" }, { "count": "5", "unit": "中山市國土資源局" }, { "count": "7", "unit": "重慶市地理信息中心" }, { "count": "9", "unit": "舟山市地理信息中心" }, { "count": "4", "unit": "諸城市國土資源局" }, { "count": "5", "unit": "諸暨市地理信息中心" }, { "count": "2", "unit": "資陽市城鄉規劃局" }, { "count": "4", "unit": "鄒平縣國土資源局" }, { "count": "4", "unit": "嵊州市住房和城鄉建設局（嵊州市測繪和地理信息局）" }, { "count": "1", "unit": "嵊州天地圖電子地圖注記" }, { "count": "4", "unit": "嵊泗縣測繪與地理信息局" }, { "count": "4", "unit": "衢州市測繪與地理信息局" }, { "count": "3", "unit": "瀘州市城市建設信息管理中心" }, { "count": "4", "unit": "縉云縣測繪與地理信息局" }, { "count": "5", "unit": "滕州市國土資源局" } ] } ],我們利用v-for循環將數據展現出來 <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 }總結
以上所述是小編給大家介紹的Vue.js 實現數據展示全部和收起功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
