首页select数据筛选更改

shuishen

2023-02-02 caac46f6340e2e94cd370ece58db74db11f6873d

 src/components/select/index.vue

@@ -1,26 +1,17 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow }"
            class="selects-box"
            @click="optionsShow = !optionsShow"
        >
        <div :class="{ 'selects-box-show': !optionsShow, 'selects-box-hide': optionsShow, 'select-choosable': selectAllClass }"
            class="selects-box" @click="selectClick">
            <div class="text" v-text="checkValue"></div>
            <i class="el-icon-arrow-down"></i>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options"
            :style="{ height: 35 * options.length + 'px' }"
        >
        <div :class="{ 'options-box-show': !optionsShow, 'options-box-hide': optionsShow, issel: options.length >= 4 }"
            class="select-options" :style="{ height: 35 * options.length + 'px' }">
            <!-- 下拉框 -->
            <div
                @click="cutValue(item, index)"
                v-for="(item, index) in options"
                :key="index"
            >{{ item[optionsName] }}</div>
            <div @click="cutValue(item, index)" v-for="(item, index) in options" :key="index">{{ item[optionsName] }}
            </div>
        </div>
    </div>
</template>
@@ -43,6 +34,12 @@
        optionsName: {
            type: String,
        },

        selectAllClass: {
            type: Boolean,
            required: false,
            default: false
        }
    },

    data () {
@@ -51,11 +48,21 @@
        }
    },

    mounted () {
        setTimeout(() => {
            console.log(this.options)
        }, 3000)
    },

    methods: {
        //点击换文字的方法
        cutValue (item, index) {
            this.optionsShow = true
            this.$emit("selectCheck", item, index)
        },
        selectClick () {
            if (this.selectAllClass == true) return
            this.optionsShow = !this.optionsShow
        }
    }
}
@@ -83,6 +90,10 @@
    border: 1px solid rgba(20, 50, 123, 1);
}

.select-choosable {
    cursor: not-allowed !important;
}

.selects-container {
    width: 100%;
    height: 100%;