dd-vue-indexeslist

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>