dd-vue-indexeslist/README.md

一个干净的轻量级移动端索引列表

## 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>
```
<!-- 
## dd-vue-indexeslist 有哪些功能
* 单层筛选
* 两层筛选
* 搜索

## Install
```
npm install dd-vue-indexeslist --save
```

## Import
新建 ddVueindexeslist.js
```
import Vue from "vue"
import ddVueindexeslist from "dd-vue-indexeslist"
import "dd-vue-indexeslist/lib/indexeslist.css"
Vue.use(ddVueindexeslist)
```
并在 main.js 中 import
```
import "./ddVueindexeslist目录/ddVueindexeslist.js";
```

## Use
在需要使用的组件内直接是用indexeslist标签
```
<template>
	<indexeslist :indexeslistData="indexeslistData" v-on:change="conditionChange" v-on:search="searchCallBack"></indexeslist>
</template>
```

## Attributes
* indexeslistData：Array 数组，筛选条件数据集
	* data：Array 数组；筛选条件主数据
	* showTier：Number 数字；筛选显示层级，2级可显示省市
	* stringCode：String 字符串；data 数据中 code 字段名
	* stringName：String 字符串；data 数据中 name 字段名
	* localCode：String 字符串；省市选择时定位城市 code
	* localName：String 字符串；省市选择时定位城市 name
	* default：Object；默认选中数据
	* search：Boolean；true | false；true 时显示搜索图标并执行search回调，其他数据可不传；默认值为 false
* change：function，筛选条件选择后的回调方法，参数(key, indexeslistData, dataKey, data, listKey, listData)
	* key：Number 数字；已选数据在 indexeslistData 数组中的一级下标
    * indexeslistData：Array 数组；筛选条件数据集
	* dataKey：Number 数字；已选数据在 indexeslistData.data 数组中的二级下标
	* data：Array 数组；筛选条件主数据
    * listKey：Number 数字；当showTier = 2时，已选数据在 indexeslistData.data['数组名'] 数组中的三级下标；showTier != 2时，undefined
	* listData：Array 数组；当showTier = 2时，indexeslistData.data 下的子集数组

## indexeslist show
* [预览地址](https://duoduoing11.github.io/dd-vue-indexeslist/dist/index.html)
* ![gif1](./img/gif1.gif)

## git  npm 地址
* [git](https://github.com/duoduoing11/dd-vue-indexeslist)
* [npm](https://www.npmjs.com/package/dd-vue-indexeslist) -->