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

前端之家收集整理的这篇文章主要介绍了Vue.js 实现数据展示全部和收起功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

搜索服务","nameen": "DMSSFW","timestamp": 1433728837000,{ "count": "0","id": 7,"namech": "ESRI*.shp","nameen": "shp","timestamp": 1433728829000,"id": 8,"namech": "KML","nameen": "KML","timestamp": 1433728822000,"id": 9,"namech": "CSV","nameen": "CSV","timestamp": 1433728818000,{ "count": "14","id": 10,"namech": "OGC WPS","nameen": "WPS","timestamp": 1439194818000,{ "count": "5","id": 11,"namech": "路径规划服务","nameen": "LJGHFW","timestamp": 1433728809000,"id": 59,"namech": "其他","nameen": "QT","timestamp": 1433728776000,"typeid": 1 } ],"mark": 1,"namech": "服务类型","nameen": "formatid","state": 0,"timestamp": 1430899276000 },{ "lscm": [ { "count": "1393","id": 12,"namech": "基础地理框架数据","nameen": "JCDLKJSJ","timestamp": 1430984656000,"typeid": 2 },{ "count": "1","id": 13,"namech": "机关单位","nameen": "JGDW","timestamp": 1431331139000,"id": 14,"namech": "人口","nameen": "RK","timestamp": 1430984658000,"id": 15,"namech": "气象","nameen": "QX","timestamp": 1430984659000,"id": 16,"namech": "旅游","nameen": "LY","id": 17,"namech": "国民经济核算","nameen": "GMJJHS","timestamp": 1430984660000,"id": 18,"namech": "就业和工资","nameen": "JYHGZ","timestamp": 1430984661000,"id": 19,"namech": "价格指数","nameen": "JGZS","timestamp": 1430984662000,{ "count": "3","id": 20,"namech": "人民生活","nameen": "RMSH","timestamp": 1430984663000,"id": 21,"namech": "财政","nameen": "CZ","id": 22,"namech": "资源和环境","nameen": "ZYHHJ","timestamp": 1430984664000,"id": 23,"namech": "能源","nameen": "NY","timestamp": 1430984665000,"id": 24,"namech": "农业","timestamp": 1430984667000,"id": 25,"namech": "工业","nameen": "GY","timestamp": 1430984668000,"id": 26,"namech": "运输和邮电","nameen": "YSHYD","timestamp": 1430984669000,"id": 27,"namech": "批发和零售","nameen": "PFHLS",{ "count": "11","id": 28,"namech": "Web服务API","nameen": "WebAPI","timestamp": 1431574777000,"id": 58,"timestamp": 1431574748000,"typeid": 2 } ],"namech": "主题分类","nameen": "servertypeid","timestamp": 1433822849000 },{ "lscm": [ { "count": "122","id": 29,"namech": "全球","nameen": "QQ","timestamp": 1430984671000,"typeid": 3 },{ "count": "13","id": 30,"namech": "国家","nameen": "GJ","timestamp": 1430984672000,{ "count": "171","id": 31,"namech": "省","nameen": "S","timestamp": 1434334496000,{ "count": "1101","id": 32,"namech": "市县","nameen": "SX","timestamp": 1430984674000,"id": 33,"timestamp": 1430984675000,"typeid": 3 } ],"namech": "覆盖区域","nameen": "districtid","timestamp": 1433822848000 },{ "lscm": [ { "count": "1413","id": 34,"namech": "CGCS2000","nameen": "CGCS2000","timestamp": 1430984676000,"typeid": 4 },{ "count": "16","id": 35,"namech": "WGS84","nameen": "WGS84","timestamp": 1430984695000,"id": 36,"timestamp": 1430984677000,"typeid": 4 } ],"namech": "坐标系","nameen": "coordinatesystemid","timestamp": 1433822847000 },{ "lscm": [ { "count": "1396","id": 37,"namech": "经纬度","nameen": "JWD","timestamp": 1430984678000,"typeid": 5 },{ "count": "33","id": 38,"namech": "Web墨卡托","nameen": "MKT","id": 39,"timestamp": 1430984679000,"typeid": 5 } ],"namech": "投影类型","nameen": "projectionid","timestamp": 1433822846000 },{ "lscm": [ { "count": "1399","id": 42,"namech": "公开","nameen": "GK","timestamp": 1430984680000,"typeid": 7 },{ "count": "30","id": 43,"namech": "授权","nameen": "SQ","timestamp": 1430984683000,"typeid": 7 } ],"namech": "使用权限","nameen": "limitsid","timestamp": 1433822843000 },{ "lscm": [ { "count": "1062","id": 44,"namech": "大于一年","nameen": "DYYN","timestamp": 1430984684000,"typeid": 8 },{ "count": "337","id": 45,"namech": "一年","nameen": "TN",{ "count": "20","id": 47,"namech": "实时","nameen": "SS","timestamp": 1430984681000,{ "count": "7","id": 48,"timestamp": 1431336067000,"typeid": 8 } ],"namech": "更新周期","nameen": "upcycle","timestamp": 1430881256000 },{ "mark": 1,"namech": "服务机构","nameen": "unit","timestamp": 1433822842000,"units": [ { "count": "11","unit": "Esri,Esri中国" },"unit": "阿坝藏族羌族自治州城乡规划建设和住房保障局" },"unit": "鞍山市规划局" },{ "count": "12","unit": "安徽省第三测绘院" },{ "count": "8","unit": "安徽省第一测绘院" },"unit": "安徽省基础测绘信息中心" },{ "count": "4","unit": "安徽省芜湖市国土资源局" },"unit": "安吉县测绘与地理信息局" },"unit": "安丘市国土资源局" },"unit": "霸州市国土资源局" },"unit": "百色市测绘地理信息局" },"unit": "北京市测绘设计研究院" },"unit": "滨州市国土资源局" },"unit": "博兴县国土资源局" },"unit": "苍南县测绘与地理信息局" },"unit": "沧州市国土资源局" },"unit": "昌乐县国土资源局" },"unit": "昌邑市国土资源局" },"unit": "常山县测绘与地理信息局" },"unit": "常州市国土资源局" },"unit": "长兴县测绘与地理信息局" },"unit": "潮州市国土资源局" },"unit": "成都市规划管理局" },"unit": "承德市国土资源局" },"unit": "滁州市国土资源和房产管理局" },"unit": "淳安县住房和城乡建设局" },"unit": "慈溪市规划局" },"unit": "大连市测绘研究院" },"unit": "大庆市城乡规划局" },"unit": "德清县地理信息中心" },"unit": "德州市国土资源局" },"unit": "东阳市测绘与地理信息局" },"unit": "东营市垦利区国土资源局" },"unit": "东莞市国土资源局" },"unit": "奉化市规划局" },{ "count": "24","unit": "福建省测绘地理信息局" },"unit": "福建省基础地理信息中心" },"unit": "福州市“数字福州”建设领导小组办公室" },"unit": "抚顺市地理信息局" },"unit": "阜新市测绘地理信息局" },"unit": "甘肃省测绘地理信息局" },{ "count": "6","unit": "赣州市国土资源局" },"unit": "高密市国土资源局" },"unit": "固原市国土资源局" },"unit": "广东省国土资源技术中心" },"unit": "广西壮族自治区测绘地理信息局" },"unit": "广西壮族自治区地图院" },"unit": "广西壮族自治区基础地理信息中心" },"unit": "广元市测绘地理信息局" },"unit": "桂林市测绘地理信息局" },"unit": "贵港市测绘地理信息局" },{ "count": "29","unit": "国家测绘地理信息局海南基础地理信息中心" },{ "count": "39","unit": "国家测绘地理信息局四川基础地理信息中心" },"unit": "国家基础地理信息中心" },{ "count": "10","unit": "哈尔滨市勘察测绘研究院" },"unit": "海宁市测绘与地理信息局" },"unit": "海盐县住房和城乡规划建设局" },"unit": "海阳市国土资源局" },"unit": "邯郸市国土资源局" },"unit": "汉中市测绘院" },"unit": "杭州市地理信息中心" },"unit": "杭州市规划局富阳规划分局" },"unit": "杭州市萧山区测绘管理中心" },"unit": "杭州市余杭区住房和城乡建设局" },"unit": "合肥市国土资源局" },"unit": "河北省保定市国土资源局" },"unit": "河北省地理信息局" },{ "count": "15","unit": "河南省测绘地理信息局" },"unit": "河南省测绘工程院" },"unit": "河南省基础地理信息中心" },"unit": "鹤壁" },{ "count": "9","unit": "鹤壁市国土资源局" },"unit": "鹤岗市城乡规划局" },"unit": "贺州市国土资源局" },"unit": "黑河市城乡规划局" },"unit": "黑龙江基础地理信息中心" },"unit": "衡水市国土资源局" },"unit": "湖北省天地图科技有限公司" },"unit": "湖南省第三测绘院" },"unit": "湖州市测绘与地理信息局" },"unit": "淮安市国土资源局" },"unit": "淮南市国土资源局" },"unit": "惠州市国土资源局" },"unit": "鸡西市城乡规划局" },"unit": "吉林省基础地理信息中心" },"unit": "济南市规划局" },"unit": "济宁市国土资源局" },"unit": "济源市测绘地理信息局" },"unit": "嘉善县测绘与地理信息局" },"unit": "嘉兴市测绘与地理信息局" },"unit": "嘉兴市规划设计研究院有限公司" },"unit": "建德市测绘和地理信息局" },"unit": "江山市测绘与地理信息局" },"unit": "江苏省测绘地理信息局" },{ "count": "23","unit": "江苏省测绘工程院" },"unit": "江苏省基础地理信息中心" },"unit": "江西省测绘应急保障服务中心" },{ "count": "49","unit": "江西省基础地理信息中心" },"unit": "焦作市国土资源局" },"unit": "金华市测绘院" },"unit": "晋城市国土资源局" },"unit": "晋中是国土资源局测管科" },"unit": "晋中市国土局测管科" },"unit": "井陉县国土局" },"unit": "景宁畲族自治县住房和城乡建设局" },"unit": "开化县规划局" },"unit": "克拉玛依天地图有限公司" },"unit": "莱芜市国土资源局" },"unit": "莱阳市国土资源局" },"unit": "莱州市国土资源局" },"unit": "兰溪市住房和城乡建设局" },"unit": "廊坊市国土资源局(地理信息局)" },"unit": "乐清市测绘与地理信息局" },"unit": "丽水市测绘中心" },"unit": "聊城市国土资源局" },"unit": "辽宁省基础地理信息中心" },"unit": "临海市测绘与地理信息局" },"unit": "临沂市测绘地理信息局" },"unit": "临朐县国土资源局" },"unit": "柳州市国土资源局" },"unit": "六安市国土资源局" },"unit": "龙口市国土资源局" },"unit": "龙游县规划局(测绘与地理信息局)" },"unit": "隆化县国土资源局" },"unit": "洛阳市国土资源局" },"unit": "眉山市测绘地理信息局" },"unit": "牡丹江市规划局" },"unit": "南京市规划局" },"unit": "南宁市国土资源局信息中心" },"unit": "南通市国土资源局" },"unit": "内江市测绘地理信息局" },"unit": "内蒙古自治区基础地理信息中心" },{ "count": "17","unit": "宁波市测绘与地理信息局" },"unit": "宁波市奉化区测绘院" },"unit": "宁波市规划局北仑分局" },"unit": "宁波市规划局镇海分局" },"unit": "宁波市规划局鄞州分局" },"unit": "宁德市国土资源局" },"unit": "宁海县规划局" },"unit": "宁夏国土资源地理信息中心" },"unit": "宁夏回族自治区国土测绘院" },"unit": "攀枝花市地理信息中心" },"unit": "盘锦市测绘地理信息局" },"unit": "磐安县规划局" },"unit": "蓬莱市国土资源局" },"unit": "平顶山市测绘地理信息局" },"unit": "平阳县测绘与地理信息局" },"unit": "浦江县测绘与地理信息局" },"unit": "栖霞市国土资源局" },"unit": "七台河市城乡规划局" },"unit": "齐齐哈尔市国土资源勘测规划设计院" },"unit": "钦州市国土资源局" },"unit": "秦皇岛市国土资源局" },"unit": "青海省基础地理信息中心" },"unit": "青田县住房和城乡规划建设局" },"unit": "青州市国土资源局" },"unit": "庆元县住房和城乡建设局" },"unit": "日照市国土资源局" },"unit": "荣成市国土资源局" },"unit": "乳山市国土资源局" },"unit": "瑞安市测绘与地理信息局" },"unit": "三门峡市国土资源局" },"unit": "三门县测绘与地理信息局" },"unit": "三亚市国土环境资源信息中心" },"unit": "山东省东营市广饶县国土资源局" },"unit": "山东省东营市国土资源局" },"unit": "山东省东营市国土资源局河口分局" },"unit": "山东省东营市利津县国土资源局" },"unit": "山东省国土测绘院" },"unit": "山东省青岛市国土资源和房屋管理局" },"unit": "山东省潍坊市国土资源局" },"unit": "山东省淄博市国土资源局" },"unit": "山西省综合地理信息中心" },"unit": "陕西省基础地理信息中心" },"unit": "陕西省西安市信息中心" },"unit": "上海市测绘院" },"unit": "绍兴市规划就上虞区分局" },"unit": "绍兴市规划局" },"unit": "绍兴市规划局上虞区分局" },"unit": "绍兴市柯桥区测绘和地理信息局" },"unit": "深圳市规划国土房产信息中心" },"unit": "沈阳市规划和国土资源局" },"unit": "石家庄市国土资源局" },"unit": "寿光国土局" },"unit": "寿光市国土局" },"unit": "双鸭山市住房和城乡建设局" },"unit": "朔州市国土资源局" },"unit": "四川省基础地理信息中心" },"unit": "四川省基础地理信心中心" },"unit": "松阳县测绘与地理信息局" },"unit": "苏州市国土资源局" },"unit": "宿迁市国土资源局" },"unit": "绥化市住房和城乡建设局" },"unit": "遂昌县住房和城乡建设局" },"unit": "台州市测绘与地理信息局" },"unit": "泰安市国土资源局" },"unit": "泰顺县测绘与地理信息局" },"unit": "泰州市国土资源局" },"unit": "太原市国土资源局" },"unit": "唐山市国土资源局" },"unit": "天津市测绘院" },"unit": "天门市城乡规划局、湖北省地图院" },"unit": "天台县住房和城乡建设规划局" },"unit": "桐庐县测绘与地理信息局" },"unit": "桐乡市测绘与地理信息局" },"unit": "威海市国土资源局" },"unit": "温岭市测绘与地理信息局" },"unit": "温州市洞头区测绘与地理信息局" },"unit": "温州市规划局(温州市测绘与地理信息局)" },"unit": "文成县测绘与地理信息局" },"unit": "文登区国土资源局" },"unit": "无锡市国土资源局" },"unit": "梧州市测绘地理信息局" },"unit": "武汉市国土资源和规划信息中心" },"unit": "武义县测绘与地理信息局" },"unit": "武义县测绘与地理信息中心" },"unit": "五大连池风景名胜区自然保护区管理委员会" },"unit": "五莲县国土资源局" },"unit": "厦门市国土资源与房产管理局" },"unit": "仙居县测绘与地理信息局" },"unit": "象山县规划局" },"unit": "孝义市国土资源局" },"unit": "新昌县测绘与地理信息局" },"unit": "新昌县住房和城乡建设局(新昌县测绘与地理信息局)" },"unit": "新疆维吾尔自治区测绘档案资料馆" },"unit": "新沂市国土资源局" },"unit": "忻州市国土资源局" },"unit": "邢台市国土资源局" },"unit": "徐州市国土资源局" },"unit": "烟台市国土资源局" },"unit": "盐城市大丰区国土资源局" },"unit": "扬州市国土资源局" },"unit": "阳泉市国土资源局" },"unit": "伊春市城乡规划局" },"unit": "伊宁市国土资源局" },"unit": "宜宾市测绘地理信息局" },"unit": "义乌市勘测设计研究院" },"unit": "永嘉县测绘与地理信息局" },"unit": "永康市测绘与地理信息局" },"unit": "榆林市信息中心" },"unit": "余姚市测绘与地理信息局" },"unit": "玉环县住房和城乡建设规划局(玉环县测绘与地理信息局)" },"unit": "云和县住房和城乡建设局" },"unit": "云南省地图院" },"unit": "枣庄市国土资源局" },"unit": "漳州市国土资源局" },"unit": "张家口国土资源局" },"unit": "张家口市国土资源局" },"unit": "肇庆市国土资源局" },"unit": "浙江省地理空间数据交换中心" },"unit": "浙江省临安市测绘与地理信息局" },"unit": "浙江省龙泉市测绘与地理信息局" },"unit": "浙江省绍兴市柯桥区测绘和地理信息局" },"unit": "镇江市国土资源局" },"unit": "中山市国土资源局" },"unit": "重庆市地理信息中心" },"unit": "舟山市地理信息中心" },"unit": "诸城市国土资源局" },"unit": "诸暨市地理信息中心" },"unit": "资阳市城乡规划局" },"unit": "邹平县国土资源局" },"unit": "嵊州市住房和城乡建设局(嵊州市测绘和地理信息局)" },"unit": "嵊州天地图电子地图注记" },"unit": "嵊泗县测绘与地理信息局" },"unit": "衢州市测绘与地理信息局" },"unit": "泸州市城市建设信息管理中心" },"unit": "缙云县测绘与地理信息局" },"unit": "滕州市国土资源局" } ] } ],我们利用v-for循环将数据展现出来
{{show}} +'show'+{{index1}}+ {{index}}-->
{{show}} +'show'+{{index1}}+ {{index}}-->
changebq(index1,val,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 实现数据展示全部和收起功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章