SOURCE

var vue = new Vue({
  el: "#app",
  data: {
    userData: [{
      "index": "A",
      users: [{
        "name": "阿光",
        "tel": "13152635896"
      },
      {
        "name": "阿辉",
        "tel": "13321478521"
      },
      {
        "name": "阿壮",
        "tel": "13565854100"
      }]
    },
    {
      "index": "B",
      users: [{
        "name": "baby",
        "tel": "13532564521"
      },
      {
        "name": "冰心",
        "tel": "13623569854"
      },
      {
        "name": "包大人",
        "tel": "17896541255"
      }]
    },
    {
      "index": "C",
      users: [{
        "name": "成龙",
        "tel": "16656852365"
      },
      {
        "name": "城管",
        "tel": "15832156589"
      },
      {
        "name": "葱头",
        "tel": "13200001254"
      }]
    },
    {
      "index": "D",
      users: [{
        "name": "打狗棒",
        "tel": "13565235552"
      },
      {
        "name": "大护法",
        "tel": "13262001221"
      },
      {
        "name": "电梯工",
        "tel": "18956854589"
      }]
    },
    {
      "index": "E",
      users: [{
        "name": "二愣子",
        "tel": "15665658565"
      },
      {
        "name": "二郎神",
        "tel": "18525658565"
      },
      {
        "name": "二号店",
        "tel": "15236363256"
      }]
    },
    {
      "index": "F",
      users: [{
        "name": "防爆管",
        "tel": "15684574562"
      },
      {
        "name": "风媒花",
        "tel": "15486854596"
      },
      {
        "name": "飞天虎",
        "tel": "17836542658"
      }]
    }],
    headTitle: "vue+mint-ui 通讯录"
  },
  methods: {
    telAlert(name, tel) {
      this.$messagebox({
        title: '呼叫 ' + name,
        message: tel,
        showCancelButton: true
      });
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<div id="app">
  <mt-header :title="headTitle">
    <mt-button icon="back" slot="left">
      返回
    </mt-button>
    <mt-button icon="more" slot="right">
    </mt-button>
  </mt-header>
  <mt-index-list>
    <mt-index-section :index="item.index" v-for="item in userData" :key="item.id">
      <mt-cell :title="user.name" v-for="user in item.users" :key="user.id"
      @click.native="telAlert(user.name,user.tel)">
      </mt-cell>
    </mt-index-section>
  </mt-index-list>
</div>

*{margin:0;padding:0}