| | |
| | | <template> |
| | | <el-form-item label="时间"> |
| | | <el-form-item :label="label" :prop="prop"> |
| | | <el-date-picker |
| | | v-model="selectedOptions" |
| | | type="month" |
| | | v-model="date" |
| | | @change="handleChange" |
| | | :type="type" |
| | | placeholder="选择时间" |
| | | start-placeholder="选择开始时间" |
| | | end-placeholder="选择结束时间" |
| | | style="width: 150px" |
| | | v-bind="$attrs" |
| | | /> |
| | | </el-form-item> |
| | | </template> |
| | | |
| | | <script> |
| | | import dayjs from 'dayjs' |
| | | import dayjs from 'dayjs'; |
| | | |
| | | const MONTH = 'month' |
| | | const MONTH = 'month'; |
| | | const DATE = 'date'; |
| | | const RANGE = 'datetimerange'; |
| | | const RANGE2 = 'daterange'; |
| | | |
| | | export default { |
| | | props: { |
| | |
| | | default: MONTH |
| | | }, |
| | | // 返回结果 |
| | | value: Date, |
| | | value: Date || Array, |
| | | // 是否默认返回初始选项 |
| | | initValue: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | label: { |
| | | type: String, |
| | | default: '时间' |
| | | }, |
| | | prop: { |
| | | type: String, |
| | | default: 'time' |
| | | } |
| | | }, |
| | | emits: ['update:value'], |
| | | emits: ['update:value', 'change'], |
| | | data() { |
| | | return { |
| | | selectedOptions: '' |
| | | } |
| | | date: this.value |
| | | }; |
| | | }, |
| | | watch: { |
| | | selectedOptions: { |
| | | handler(nVal, oVal) { |
| | | if (nVal != oVal) { |
| | | this.$emit('update:value', nVal) |
| | | } |
| | | } |
| | | }, |
| | | value: { |
| | | handler(nVal, oVal) { |
| | | if (nVal != oVal) { |
| | | this.selectedOptions = nVal |
| | | } |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | computed: {}, |
| | | methods: { |
| | | timeFormat() { |
| | | switch (this.type) { |
| | | case MONTH: |
| | | return 'YYYY-MM' |
| | | default: |
| | | return 'YYYY-MM' |
| | | } |
| | | handleChange(value) { |
| | | this.$emit('update:value', value); |
| | | this.$emit('change', value); |
| | | } |
| | | }, |
| | | mounted() { |
| | | if (this.initValue) { |
| | | this.selectedOptions = new Date() |
| | | this.date = new Date(); |
| | | this.handleChange(this.date); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |