使用Mint UI 的Index List 制作通讯录功能

深碍√TFBOYSˉ_ 2022-03-27 05:14 67阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70][]

.vue

<mt-index-list>
                <mt-index-section
                  v-for="(lettersort, index) in lettersSort"  // 主要代码
                  :key="index"
                  :index="lettersort.Letter"
                >
                  <div
                    class="van-hairline--bottom outer_div"
                    v-for="(item, index) in lettersort.data"  // 主要代码
                    :key="index"
                    @click="goPersonDatails(item)"
                  >
                    <van-row style="height: 60px;" type="flex" align="center">
                      <van-col span="3" offset="1">
                        <img class="headPortrait" src="../../../assets/img/headPortrait.png">
                      </van-col>
                      <van-col span="12" offset="1">
                        <div>{
       {item.Name}}</div>
                        <div
                          class="van-ellipsis location_div"
                        >{
       {item.IsSalesPerson?item.SalesArea:item.DirectDept}}</div>
                      </van-col>
                      <van-col offset="5" span="3">
                        <span
                          class="icon iconfont icon-dianhua icon_iphone"
                          @click.stop="dialPhoneNumber(item.Telephone)"
                        ></span>
                      </van-col>
                    </van-row>
                  </div>
                </mt-index-section>
              </mt-index-list>

.ts

方法一：
    private sortLetter(addressLists) {
        let letters = [
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z"
        ];
        let sameLetter = [] as IndexObject;
        let addressListSort = [] as IndexObject;
        for (let letter of letters) {
          for (let addressList of addressLists) {
            let nameLetter = HanziToPinyin.instance.initialTreatment(
              addressList.Name
            );
            if (letter === nameLetter) {
              sameLetter.push(addressList);
            }
          }
          if (sameLetter.length > 0) {
            addressListSort.push({
              Letter: letter,
              data: sameLetter
            });
            sameLetter = [];
          }
        }
        return addressListSort;
      }
    
    private queryPersonSuccess(res) {
        this.addressListSort = this.sortLetter(res.data.data);
    }
    
    
    方法二：
    安装 ：npm install linq
    
    import Enumerable from "linq";
      private queryPersonSuccess(res) {
        if (!res.data.data || res.data.data.length === 0) {
          this.addressList = [];
          this.addressListGroupByLetter = [];
          return;
        }
        res.data.data.forEach(element => {
          element.Letter = HanziToPinyin.instance.initialTreatment(element.Name);
          this.addressList.push(element);
        });
        this.addressListGroupByLetter = Enumerable.from(this.addressList)
          .groupBy(
            (x: any) => x.Letter,
            (x: any) => x,
            (key: any, res: any) => {
              return { Letter: key, AddressList: res.toArray() };
            }
          )
          .orderBy((x: any) => x.Letter)
          .toArray();
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70]: /images/20220327/99a2d86ddb944d7887460e87d3993b71.png