微信小程序中自定义select下拉选项框

由于微信小程序没有像h5那样的select，所以决定自己写一个。
此处是mpvue写的微信小程序

<template>
      <div class="select_Box">
        <div class="select_box" >
          <div @click="select=!select">{{select_box_name}}</div>
              <div  class="select_box_select" v-if="select"> 
                  <div  v-for="(item, index) in tableData" :key="index" >
                    <div class="select_one" @tap="mySelect" :data-id="item.id" :data-name="item.name" :data-items="item.items">{{item.name}}</div>
                  </div>
              </div>  
            </div>
        </div>
        <div class="select_box1" >
            <div @click="select1=!select1">{{select_box_name1}}</div>
              <div  class="select_box_select" v-if="select1"> 
                  <div  v-for="(item, index) in tableDataItems" :key="index" >
                    <div class="select_one" @tap="mySelect1"  :data-name="item.name" :data-value="item.id">{{item.name}}</div>
                  </div>
              </div>  
            </div>
        </div>
      </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "早饭",
          items: [
            { id: 11, name: "豆浆" },
            { id: 12, name: "包子" },
            { id: 13, name: "油条" }
          ]
        },
        {
          id: 2,
          name: "午饭",
          items: [{ id: 21, name: "菜煎饼" }, { id: 22, name: "豆芽饼" }]
        }
      ],
      tableDataItems: [],
      select_box_name: "早饭",
      select_box_name1: "豆浆",
      select: false,
      select1: false
    };
  },
  methods: {
    mySelect(e) {
      console.log(e);
      this.tableDataItems = e.currentTarget.dataset.items;
      this.select_box_name = e.currentTarget.dataset.name;
      this.select_box_name1 = e.currentTarget.dataset.items[0].name;
      this.select = !this.select;
      this.select1 = false;
      //id    e.currentTarget.dataset.id
    },
    mySelect1(e) {
      console.log(e);
      this.select_box_name1 = e.currentTarget.dataset.name;
      this.select1 = !this.select1;
      this.select = false;
      //id    e.currentTarget.dataset.id
    }
  }
}
</script>
<style lang="less" scoped>
.select_box {
  margin-right: 5rpx;
  text-align: center;
  float: left;
  width: 200rpx;
  line-height: 60rpx;
  border: 1rpx solid #cccccc;
  position: relative;

  .select_box_select {
    position: absolute;
    left: 0;
    top: 60rpx;
    z-index: 1000;
    border: 1rpx solid #cccccc;
    border-bottom: none;
    border-top: none;
    .select_one {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-bottom: 1rpx solid #cccccc;
    }
  }
}
.select_box1 {
  text-align: center;
  float: left;
  width: 200rpx;
  line-height: 60rpx;
  height: 60rpx;
  border: 1rpx solid #cccccc;
  position: relative;

  .select_box_select {
    position: absolute;
    left: 0;
    top: 60rpx;
    z-index: 1000;
    border: 1rpx solid #cccccc;
    border-bottom: none;
    border-top: none;
    .select_one {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-bottom: 1rpx solid #cccccc;
    }
  }
}

</style>