date-range.vue 850 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <div class="date-range">
  3. <el-date-picker v-model="value[0]" value-format="yyyy-MM-dd" type="date" placeholder="起始日期"></el-date-picker>
  4. <span class="to">至</span>
  5. <el-date-picker v-model="value[1]" value-format="yyyy-MM-dd" type="date" placeholder="至今"></el-date-picker>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. model: {
  11. prop: "value",
  12. event: "change"
  13. },
  14. props: ["value"],
  15. components: {},
  16. data() {
  17. return {};
  18. },
  19. computed: {},
  20. mounted() {
  21. console.log(this.value, this.change);
  22. },
  23. methods: {
  24. handleDeleteFile() {
  25. this.$emit("change", "");
  26. }
  27. }
  28. };
  29. </script>
  30. <style lang="scss">
  31. .date-range {
  32. position: relative;
  33. display: flex;
  34. line-height: 40px;
  35. background: #fff;
  36. .to {
  37. margin: 0 10px;
  38. }
  39. .el-date-editor {
  40. width: 150px;
  41. }
  42. }
  43. </style>