vue中使用element-ui多选组件实现单选

效果图:


代码:

<el-checkbox-group v-model="value">

                            <el-checkbox class="checklabel" v-for="(item , index) in optionsitem"  @change="onChange(item,index)" :key="item.value" :label="item.label">

                            </el-checkbox>

                            </el-checkbox-group>



方法:

onChange(item,index) {

            //把多选做成单选的样式

            let check = null;

            this.options.forEach(res => {

                if (res.label == item.label) {

                res.isCheck = true;

                res.isqx += 1;

                //2为同一个的取消,1为同一个的选中

                if (res.isqx == 2) {

                    res.isqx = 0;

                    check = false;

                } else if (res.isqx == 1) {

                    check = true;

                }

                } else

                {

                res.isCheck = false;

                res.isqx = 0;

                }

            });

            let label = item.label;

            let nList = this.value.filter(word => word == label);

            this.value = nList;

        }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容