vue vant-checkbox组件根据value获取数组下标 不念不忘少年蓝@ 2021-09-08 17:36 675阅读 0赞 <template> <div class="main-para"> <van-nav-bar title="选择门店" class="public-title" left-arrow @click-left="onClickLeft" /> <div class="main"> <van-search v-model="search" shape="round" placeholder="查找门店" /> <div class="list"> <van-checkbox-group v-model="result"> <van-cell-group> <van-cell v-for="(item, index) in list" clickable :key="index" :title=item @click="toggle001(index)"> <template \#right-icon> <van-checkbox :name="item" ref="checkboxes" /> </template> </van-cell> </van-cell-group> </van-checkbox-group> </div> <div class="bottom"> <p v-if="result\[0\] =='全部门店'">已选择全部门店</p> <p v-else>已选择<span style="color:red;">\{ \{result.length\}\}</span>家门店</p> <van-button type="info" @click="submit">确定</van-button> </div> </div> </div> </template> <script> import \{ request \} from "@/network/request.js"; import \{ Toast \} from 'vant'; export default \{ data() \{ return \{ lists: \['全部门店'\], list: \['全部门店'\], result: \[\], //所有选中的值 search: "", shopNum: 0, \}; \}, created() \{ this.getShopList(); \}, methods: \{ //根据value获取数据下标 contains(a, obj) \{ var i = a.length; while (i--) \{ if (a\[i\] === obj) \{ return i; \} \} return false; \}, //获取门店列表 getShopList() \{ const userInfo = this.$store.getters.getUserInfo; request(\{ url: '/api/room/page', params: \{ status: 1, pageNum: 1, pageSize: 500, deviceSource: 'deviceSourceShangHu', userId: userInfo.id, tenantId: userInfo.tenantId, token: this.$store.getters.getToken \} \}).then(res => \{ console.log(res); if (res.status == 200 && res.success) \{ res.data.records.forEach(item => \{ this.lists.push(item.name); this.list.push(item.name); \}); \} else \{ Toast.fail(\{ message: res.message || '暂无数据', duration: 1.5 \* 1000 \}) return; \} \}).catch(res => \{ Toast.clear(); Toast.fail(\{ message: res.response.data.message || '暂无数据', duration: 1.5 \* 1000 \}) return; \}) \}, toggle001(index) \{ if (this.$refs.checkboxes\[index\].name == '全部门店') \{ if (!this.$refs.checkboxes\[index\].checked) \{ this.$refs.checkboxes.forEach((it) => \{ if (it.name != '全部门店') \{ it.checked = false; this.result.splice(this.contains(this.result,it.name),1); \} \}) \} \} else \{ if (!this.$refs.checkboxes\[index\].checked) \{ this.$refs.checkboxes.forEach(item => \{ if (item.name == '全部门店') \{ item.checked = false; \} \}) \} \} //this.$refs.checkboxes\[index\].toggle(); \}, submit() \{ if (this.result != "") \{ this.$router.push(\{ name: 'homePage', params: \{ data: this.result \} \}) \} else \{ this.$Toast("请至少选择一家门店"); \} \}, onClickLeft() \{ this.$router.push(\{ path: "/" \}) \} \}, watch: \{ search(i) \{ this.list = \[\]; this.lists.forEach(el => \{ if (el.indexOf(i) != -1) \{ this.list.push(el); \} \}); \} \}, mounted() \{ if (this.$route.params.data) \{ this.result = this.$route.params.data; \} \} \} </script> <style scoped lang="less"> @import "../assets/style/publicTitle.css"; .main-para \{ width: 100%; height: 100%; \} .main \{ position: relative; \} .list \{ width: 95%; margin: 0 auto; \} .bottom \{ width: 90%; position: absolute; left: 5%; bottom: 5%; p \{ padding-left: 5px; \} button \{ width: 100%; background-color: \#2caaef; border-radius: 10px; \} \} /deep/.van-nav-bar\_\_left .van-icon \{ color: \#000; \} </style>
还没有评论,来说两句吧...