<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Vue.js 實現數據展示全部和收起功能

        來源:懂視網 責編:小采 時間:2020-11-27 22:08:20
        文檔

        Vue.js 實現數據展示全部和收起功能

        Vue.js 實現數據展示全部和收起功能:如圖所示,當我們獲取到數據后每個欄都只顯示5條,多出的部分隱藏,點擊顯示全部將數據都展現出來,如圖所示 首先我們的數據類型是這樣的, tableData: [ { comment: , lscm: [ { count: 1268, id: 1, namech:
        推薦度:
        導讀Vue.js 實現數據展示全部和收起功能:如圖所示,當我們獲取到數據后每個欄都只顯示5條,多出的部分隱藏,點擊顯示全部將數據都展現出來,如圖所示 首先我們的數據類型是這樣的, tableData: [ { comment: , lscm: [ { count: 1268, id: 1, namech:

        如圖所示,當我們獲取到數據后每個欄都只顯示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": "寧海縣規劃局"
         },
         {
         "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 實現數據展示全部和收起功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Vue.js 實現數據展示全部和收起功能

        Vue.js 實現數據展示全部和收起功能:如圖所示,當我們獲取到數據后每個欄都只顯示5條,多出的部分隱藏,點擊顯示全部將數據都展現出來,如圖所示 首先我們的數據類型是這樣的, tableData: [ { comment: , lscm: [ { count: 1268, id: 1, namech:
        推薦度:
        標簽: 顯示 數據 VUE
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 人与动性xxxxx免费| 国产产在线精品亚洲AAVV| 久久精品视频免费| 亚洲伊人成无码综合网| 有色视频在线观看免费高清在线直播| 国产精品国产午夜免费福利看| 亚洲欧美综合精品成人导航| 性色av无码免费一区二区三区| 亚洲日韩国产精品无码av| 国产精品69白浆在线观看免费| 亚洲不卡在线观看| 嫩草影院在线免费观看| 美女视频黄频a免费观看| 狠狠亚洲狠狠欧洲2019| 久久成人免费播放网站| 亚洲理论片中文字幕电影| 国产a视频精品免费观看| 亚洲日本国产综合高清| 在线日韩av永久免费观看| 牛牛在线精品免费视频观看| 亚洲色偷偷综合亚洲AV伊人| 中文字幕乱码一区二区免费| 亚洲情a成黄在线观看动漫尤物| 性xxxxx免费视频播放| 亚洲aⅴ无码专区在线观看春色 | 亚洲麻豆精品果冻传媒| 国产成人免费网站| 国产亚洲女在线线精品| 国产亚洲精AA在线观看SEE| 成人免费的性色视频| 亚洲av永久中文无码精品综合 | 精品久久香蕉国产线看观看亚洲| 人妻丰满熟妇无码区免费| 亚洲欧美国产欧美色欲| jlzzjlzz亚洲乱熟在线播放| 3344免费播放观看视频| 色婷婷六月亚洲综合香蕉| 国产成人精品日本亚洲网站| 青青草国产免费久久久91| 免费无码又爽又刺激一高潮| 亚洲欧洲日本在线观看|