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

网络编程 2024/11/18 佚名

3 2 1

如图所示，当我们获取到数据后每个栏都只显示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}}   <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}}   <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"color: #ff0000">总结

以上所述是小编给大家介绍的Vue.js 实现数据展示全部和收起功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue.js,数据展示,vue.js,数据收起