element ui select 组选择器只能选择一个

最新推荐文章于 2023-12-22 10:41:43 发布

zy991315

最新推荐文章于 2023-12-22 10:41:43 发布

阅读量1.3k

点赞数 2

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/zy991315/article/details/126667182

版权

html 部分

  <el-select v-model="value" value-key="value" :collapse-tags="true" multiple placeholder="请选择"
            @change="handSelect">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                <el-option :disabled="disabledFun(item)" v-for="item in group.options" :key="item.value"
                    :label="item.label" :value="item">
                </el-option>
            </el-option-group>
        </el-select>

js部分

      data: function () {
            return {
                options: [{
                    label: '热门城市',
                    options: [{
                        value: 'Shanghai',
                        label: '上海',
                    }, {
                        value: 'Beijing',
                        label: '北京',
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],
                value: [],
                values: []
            }
        },
        mounted() {
            // 这里是接口获取数据时候  给每个options 添加pid  是外层的options的lable 要确保lable不能重复  所以需要id  要后端给id
            this.value = ['Dalian']
            this.options.forEach(item => {
                item.options.forEach(group => {
                    group['pid'] = item.label
                    if (this.value.indexOf(group.value) != -1) {
                        this.value[this.value.indexOf(group.value)] = group
                    }
                });
            });

        },

        methods: {
            handSelect(v) {

            },
            // disable 事件
            disabledFun(val) {
                return this.value.some(item => {
                    return item.pid == val.pid && item.value !== val.value
                });
            }
        }