vue vant-checkbox组件根据value获取数组下标

不念不忘少年蓝@ 2021-09-08 17:36 725阅读 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>

.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>