Vue.js 实现数据展示全部和收起功能

如图所示,当我们获取到数据后每个栏都只显示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 实现数据展示全部和收起功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

  • Vue.js 实现数据展示全部和收起功能

    如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示 首先我们的数据类型是这样的, tableData: [ { "comment": "", "lscm": [ { "count": "1268", "id": 1, "namech": "OGC WMTS", "nameen"

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • Vue大屏数据展示示例

    高效实现需求,避免臃肿的组件库和重复造轮子,前段时间做了很多大屏展示类的项目,今天来跟大家分享一下,大屏的实践过程,最开始我是使用了dataview 这个组件库,然后发现是自己并不需要它太多的封装好的组件,而且在移动端,有样式错乱的问题.所以自己看了他的实现方式,搞了一个大屏自适应的组件.话不多说,直接上效果图: 效果图 需要适配所有尺寸的大型显示屏,并且在手机上,可以缩放查看效果.我这里添加了这样一段代码,通过缩放body的大小,进行等比例放大缩小,达到不变形,整体适配的效果. <script

  • 使用Vue.js实现数据的双向绑定

    目录 如何用Vue.js实现数据的双向绑定? 1. 理解双向绑定 2. 使用v-model指令 3. 使用自定义组件实现双向绑定 4. 数据劫持 5. 模板引擎 6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据.在本文中,我们将介绍如何用Vue.js实现数据的双向绑定. 1. 理解双向绑定 首先,我们需要了解双向绑定的原理.在Vue.js中

  • vue.js做一个简单的编辑菜谱功能

    先给大家展示下效果图,如果感觉不错,请参考实现代码 1.先获取门店下的所有菜品类型.菜品名称.菜品id(list),也就是最大数据量 this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = r

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • Vue.js项目实战之多语种网站的功能实现(租车)

    首先来看一下网站效果,想写这个项目的读者可以自行下载哦,地址:https://github.com/Stray-Kite/Car: 在这个项目中,我们主要是为了学习语种切换,也就是右上角的 中文/English 功能的实现. 首先看一下模拟的后台数据src/config/modules/lang.js 文件中: 关键代码: export default { name: 'Homepage', components: { ScrollNumber }, data () { return { lan

  • Vue.js实现可排序的表格组件功能示例

    本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns

  • vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

随机推荐