Welcome to dd-vue-indexeslist

dd-vue-indexeslist一个干净的轻量级移动端索引列表。

list: [{
	"ZID": "1101",
	"ZNANM": "北京市",
	"ZPINYIN": "BEIJINGSHI",
	"ZSUOXIE": "BJS",
	"ZCSJB": "T",
	"ZPRID": "11",
	"ZLEVL": "2",
	"ZMDAT": "2015-09-06",
	"ZMTIM": "18:03:57",
	"ZMPER": "08103127",
	"ZVERSION": "20150906100357",
	"ZMITP": "N"
},
{
	"ZID": "1102",
	"ZNANM": "北京郊县",
	"ZPINYIN": "BEIJINGJIAOXIAN",
	"ZSUOXIE": "BJJX",
	"ZCSJB": "A",
	"ZPRID": "11",
	"ZLEVL": "2",
	"ZMDAT": "2015-09-06",
	"ZMTIM": "18:03:57",
	"ZMPER": "08103127",
	"ZVERSION": "20150906100357",
	"ZMITP": "N"
}]

data() {
	return {
		indexeslistData: {
			data: list,
			stringCode: 'ZID',
			stringName: 'ZNANM',
			stringSpell: 'ZPINYIN'
		},
		value: ''
	};
},
watch: {
	value() {
		this.$refs.indexeslist.searchList(this.value, this.$refs)
	},
},
methods: {
	listRowClick(rowData) {
		console.log(rowData);
	}
}

<div>
	<input v-model="value"
			class="input"
			placeholder="请输入用户名" />
	<indexeslist ref="indexeslist"
					:indexeslistData="indexeslistData" v-on:click="listRowClick">
		<div :ref="listRowData.ZSUOXIE+'_'+listRowData.ZPINYIN+'_'+listRowData.ZNANM+'_'+listRowData.ZID"
				class="list-letter-row-main"
				slot="list-letter-row-main"
				slot-scope="{letterKey, listRowKey, listRowData}"
				:pinyin="listRowData.ZPINYIN"
				:pinyinSX="listRowData.ZSUOXIE"
				:textName="listRowData.ZNANM"
				:textCode="listRowData.ZID"
				:letterKey="letterKey"
				:listRowKey="listRowKey">{{listRowData.ZNANM}}</div>
		<div class="list-letter-row-main"
				slot="list-letter-row-main-search"
				slot-scope="{letterKey, listRowKey, listRowData}">{{listRowData.ZNANM}}</div>
	</indexeslist>
</div>