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


Posted in Javascript onSeptember 05, 2018

如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示

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

首先我们的数据类型是这样的,     

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 实现数据展示全部和收起功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
浅谈vue 单文件探索
Sep 05 #Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 #Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
vue中动态添加class类名的方法
Sep 05 #Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 #Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 #Javascript
vue 监听屏幕高度的实例
Sep 05 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python中tell()方法的使用详解
2015/05/24 Python
用Python解决计数原理问题的方法
2016/08/04 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Internet体系结构
2014/12/21 面试题
工厂车间标语
2014/06/19 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python连续赋值需要注意的一些问题
2021/06/03 Python
使用JS实现简易计算器
2021/06/14 Javascript