由于微信小程序没有像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>