基于uni-app,color UI做的小程序索引列表

话不多说，先上效果图

数据格式

[
			{
				"name": "A",
				"children": [{
					"merchant_name": "阿三1",
					"merchant_id": 1,
					"name": "A"
				}, {
					"merchant_name": "阿四2",
					"merchant_id": 2,
					"name": "A"
				}, {
					"merchant_name": "A狗桦2",
					"merchant_id": 22,
					"name": "A"
				}, {
					"merchant_name": "A狗桦3",
					"merchant_id": 23,
					"name": "A"
				}]
			}, {
				"name": "B",
				"children": [{
					"merchant_name": "B暑荣3",
					"merchant_id": 3,
					"name": "B"
				}, {
					"merchant_name": "B拓4",
					"merchant_id": 4,
					"name": "B"

				}, {
					"merchant_name": "B秀秀秀2",
					"merchant_id": 222,
					"name": "B"
				}, {
					"merchant_name": "B秀秀秀3",
					"merchant_id": 233,
					"name": "B"
				}]
			}
]

主要过滤数据代码部分,this.constMerchantData这是一个所有商户的数组，这是个不会改变的常量,每次过滤都是过滤这个数组

getData() {
    this.list = this.constMerchantData.map(item => {
     var children = item.children.filter(
      item2 => item2.merchant_name.indexOf(this.vague) > -1)
     if (children.length > 0) {
      return {
       name: item.name,
       children: children
      }
     } else {
      return {
       name: "",
       children: []
      }
     }
    })
   }

源码附件在最开头,往上翻…