ads_web/src/components/cardComponents/dynamicCard.vue

<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-card :body-style="{ padding: '0px' }" @click="changeFn">
                    <div style="display: flex; align-items: center;">
                        <div>
                            <div>
                                <el-select v-model="value" placeholder="Select" size="small">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="item.disabled"
                                    />
                                </el-select>
                            </div>
                            <!--<div style="color:#909399;margin-left: 8px">{{ color }}</div>-->
                            <div style="font-weight: bold;font-size: large;margin-left: 8px">{{ cardMiddle }}</div>
                            <div style="margin-left: 8px">
                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
                                <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref, toRefs, computed, reactive } from 'vue'

export default {
    props: ['dynamicCardData', 'selectOptions'],
    emits: ['change'],

    setup(props, context) {
        // 父组件传递的卡片数据
        let cardData = props.dynamicCardData
        // 父组件传递的下拉框数据
        let selectOptions = props.selectOptions
        // el-selection配置
        const value = ref('')
        const options = selectOptions

        // todo 抛出点击后切换显示图线的方法
        let status = true

        function changeFn() {
            status = !status
            context.emit('change', status)
        }

        return {
            cardData,
            ...toRefs(cardData),
            selectOptions,
            value,
            options,
            changeFn
        }
    }
}


</script>

<style scoped lang="scss">

</style>