<template> <div> <a-select v-if="query" style="width: 100%" @change="handleSelectChange"> <a-select-option v-for="(item, index) in queryOption" :key="index" :value="item.value"> {{ item.text }} </a-select-option> </a-select> <a-switch v-else v-model="checkStatus" :disabled="disabled" @change="handleChange"/> </div> </template> <script> export default { name: 'JSwitch', props: { value: { type: String | Number, required: false }, disabled: { type: Boolean, required: false, default: false }, options: { type: Array, required: false, default: () => ['Y', 'N'] }, query: { type: Boolean, required: false, default: false } }, data() { return { checkStatus: false } }, watch: { value: { immediate: true, handler(val) { if (!this.query) { if (!val) { this.checkStatus = false this.$emit('change', this.options[1]); } else { if (this.options[0] == val) { this.checkStatus = true } else { this.checkStatus = false } } } } } }, computed: { queryOption() { let arr = [] arr.push({value: this.options[0], text: '是'}) arr.push({value: this.options[1], text: '否'}) return arr; } }, methods: { handleChange(checked) { let flag = checked === false ? this.options[1] : this.options[0]; this.$emit('change', flag); }, handleSelectChange(value) { this.$emit('change', value); } }, model: { prop: 'value', event: 'change' } } </script>