vue中如何使用element日歷組件

小編給大家分享一下vue中如何使用element日歷組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

先看下效果圖：

完整代碼附上

<template>
  <div class="newSeeds" id="famerCalendar">
    <div class="title-bottom">
      <el-date-picker
        :clearable="false"
        prefix-icon="timeFilter"
        v-model="value2"
        type="month"
        placeholder="選擇月"
        value-format="yyyy-MM"
        @change="changeDate"
      >
      </el-date-picker>
    </div>
    <div class="calendarBody">
      <el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date, data }">
          <div
            @click="chooseDay(data)"
            class="cellInfo"
            :class="data.isSelected == true ? 'shadowBox' : ''"
          >
            <ul class="cellInfoUl">
              <li v-for="(item, index) in activeList" :key="index">
                <p v-if="data.day == item.time" class="cellInfoUlP">
                  {{ item.name }}
                </p>
              </li>
            </ul>
            <div
              v-for="(val, keys, i) in reverseMessage"
              :key="i"
              :class="data.day == keys ? 'tipMsg' : ''"
            >
              <span v-if="data.day == keys" class="tipMsged">{{ val }}</span>
            </div>
            <div class="cellInfoBox">
              <p>{{ data.day.split("-")[2] }}</p>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <!-- 抽屜 -->
    <el-drawer
      :title="timeChoose"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div class="modeEach" v-if="listNormal[0]">
        <div class="modeEachs" v-for="(item, index) in listNormal" :key="index">
          <i class="setI el-icon-delete" @click="delTips(item)"></i>
          <i
            class="setI setIs el-icon-edit-outline"
            @click="addTips(1, item)"
          ></i>
          <p>
            <span>開始時間:</span> <span>{{ item.time }}</span>
          </p>
          <p>
            <span>農事活動名稱:</span> <span>{{ item.name }}</span>
          </p>
          <p>
            <span>負責人:</span> <span>{{ item.userName }}</span>
          </p>
          <p>
            <span>參與人數:</span> <span>{{ item.people }}</span>
          </p>
          <p>
            <span>目標規格:</span> <span>{{ item.content }}</span>
          </p>
        </div>
      </div>
      <div class="modeEach modeEached" v-else>
        <div class="emptyState">
          <img src="../../../assets/leftScreen/math27.png" alt="" />
        </div>
        <p>當前日期暫無農事活動安排，</p>
        <p>點擊右下角“添加農事活動”按鈕添加吧！</p>
      </div>
      <div class="footBox">
        <el-button type="primary" @click="addTips(0)">添加農事活動</el-button>
      </div>
    </el-drawer>
    <!--新增修改 -->
    <el-dialog
      title=""
      :visible.sync="updateForm"
      width="31vw"
      class="addAlameBox"
    >
      <div slot="title" class="header-title" >
        <span class="title-name"></span>
        <span class="title-age">{{ boxPrompt }}</span>
        <span
          style="
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
            font-size: 2.22vh;
          "
        >
        </span>
      </div>
      <div class="addAlaForm">
        <el-form
          ref="upTableData"
          :rules="rules"
          :model="upTableData"
          label-width="10vw"
        >
          <!-- <el-form-item label="開始時間" prop="time">
            <div class="block">
              <el-date-picker
                v-model="upTableData.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="選擇日期時間"
              >
              </el-date-picker>
            </div>
          </el-form-item> -->
          <el-form-item label="農事活動名稱" prop="name">
            <el-input v-model="upTableData.name"></el-input>
          </el-form-item>
          <el-form-item label="負責人" prop="userName">
            <el-input v-model="upTableData.userName"></el-input>
          </el-form-item>
          <el-form-item label="參與人數" prop="people">
            <el-input v-model="upTableData.people"></el-input>
          </el-form-item>
          <el-form-item label="目標規格" prop="content">
            <el-input v-model="upTableData.content"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button
              class="saveBtn"
              type="primary"
              @click="saveForm('upTableData')"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dateFormat from "../../../components/dealTime.js";
export default {
  data() {
    return {
      timeChoose: "7-26",
      sixs: [],
      num: 0,
      activeday: 0,
      timeRex: "",
      listParams: {
        page: 1,
        size: "",
        where: "",
        time: "",
      },
      ids: 0,
      listNormal: [],
      activeList: [
        {
          data1: "2021/08/17 15:30",
          data2: "1#地塊澆水灌溉",
          data3: "孫國棟",
          data4: "16",
          data5: "土壤水分達到40%",
        },
        {
          data1: "2021/08/17 15:30",
          data2: "1#地塊澆水灌溉",
          data3: "孫國棟",
          data4: "16",
          data5: "土壤水分達到40%",
        },
      ],
      updateForm: false,
      boxPrompt: "新建",
      upTableData: {
        id: 0,
        name: "", //操作名稱
        time: "", //計劃時間
        userName: "", //負責人
        people: "", //人數
        content: "", //內容
      },
      rules: {
        data1: [
          { required: true, message: "時間", trigger: ["blur", "change"] },
        ],
        data2: [
          {
            required: true,
            message: "產品名稱不可為空",
            trigger: ["blur", "change"],
          },
        ],
        data3: {
          required: true,
          message: "產品類型不可為空",
          trigger: ["blur", "change"],
        },
        data4: {
          required: true,
          message: "規格不可為空",
          trigger: ["blur", "change"],
        },
        data5: {
          required: true,
          message: "運送數量不可為空",
          trigger: ["blur", "change"],
        },
      },
      // 抽屜
      drawer: false,
      direction: "rtl",
      // 日期
      value2: "",
      value: new Date(),
      loading: false,
      logisticsForm: {
        name: "",
        region: -1,
      },
    };
  },

  mounted() {
    this.requrstLists();
    this.getNowDate();
    // this.getActivityCalendar;
  },
  watch: {
    activeList(newVal) {
      this.activeList = newVal;
    },
  },
  computed: {
    reverseMessage() {
      var arrs = [];
      var countArrs = [];
      this.activeList.forEach((val) => {
        arrs.push(val.time);
      });
      return arrs.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        countArrs.push({ prev });
        return prev;
      }, {});
      // };
    },
  },
  methods: {
    // 獲取當前時間
    getNowDate(){
      var date = new Date();
      this.value2 = dateFormat('YYYY-mm',date)
    },
    // 獲取列表接口
    async requrstLists() {
      const {
        data: { datas },
      } = await this.$post("product/getProductPlayList", {
        page: 1,
        size: "",
        where: "",
        time: "",
      });
      datas.forEach((val) => {
        if (val.time.indexOf(":")) {
          console.log("發現空格");
          val.time = val.time.split(" ")[0];
        }
      });
      this.activeList = datas;
      // this.sortArr()
    },
    async requrstList() {
      const {
        data: { datas },
      } = await this.$post("product/getProductPlayList", this.listParams);
      this.listNormal = datas;
    },
    //   新增
    addTips(val, item) {
      this.updateForm = true;
      if (val === 0) {
        this.boxPrompt = "新建";
        this.upTableData = {
          id: 0,
          name: "", //操作名稱
          time: "", //計劃時間
          userName: "", //負責人
          people: "", //人數
          content: "", //內容
        };
      } else if (val === 1) {
        this.boxPrompt = "編輯";
        this.ids = item.id;
        this.$nextTick(() => {
          this.upTableData = JSON.parse(JSON.stringify(item));
        });
      }
    },
    //保存
    saveForm() {
      let url = "/product/editProductPlay";
      if (this.boxPrompt == "新建") {
        this.upTableData.id = 0;
      } else if (this.boxPrompt == "編輯") {
        this.upTableData.id = this.ids;
      }
      this.upTableData.time = this.timeChoose + " 00:00:00";
      this.$refs["upTableData"].validate((valid) => {
        if (valid) {
          this.$get(url, this.upTableData).then((res) => {
            this.updateForm = false;
            if (res.data.state == "success") {
              this.requrstList();
              this.requrstLists();
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失敗！請稍后重試！");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    chooseDay(data) {
      this.$nextTick(() => {
        if (data.type === "current-month") {
          this.drawer = true;
          this.listParams.time = data.day;
          this.timeChoose = data.day;
          this.requrstList();
        } else if (data.type === "prev-month") {
          this.prevBtn.click();
        } else if (data.type === "next-month") {
          this.nextBtn.click();
        }
      });
    },

    //   抽屜
    handleClose(done) {
      this.$confirm("確認關閉？")
        .then((res) => {
          done();
          this.requrstLists();
        })
        .catch((err) => {});
    },
    // 刪除
    delTips(val) {
      console.log(val);
      this.$confirm("此操作將永久刪除該文件, 是否繼續?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/product/deteleProductPlay", { id: val.id }).then(
            (res) => {
              if (res.data.state == "success") {
                this.$message.success("刪除成功");
                this.requrstList();
                this.requrstLists();
              } else {
                this.$message(res.data.msg);
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消刪除",
          });
        });
    },

    //時間選擇
    changeDate(val) {
      this.value = val;
    },
    //刷新
    refresh() {
      this.loading = true;
      //   this.requrstList();
    },
    //搜索
    search() {
      let name = this.logisticsForm.name;
      let level = this.logisticsForm.region;
      if (level == -1) level = "";
      this.loading = true;
      //   this.requrstList(name, level);
    },
    //重置
    removeForm() {
      this.logisticsForm.name = "";
      this.logisticsForm.region = -1;
      //   this.requrstList();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../../style/backTable.less";
</style>
  <style scoped lang="less">
#famerCalendar /deep/ .el-calendar-table {
  width: 100%;
  height: 100%;
  &:not(.is-range) {
    //使不是本月的日期不可點擊，不會跳轉到其他月份
    td.next {
      pointer-events: none;
    }
    td.prev {
      pointer-events: none;
    }
  }
}

.calendarBody {
  width: 100%;
  height: 81vh;
}
#famerCalendar .newSeeds {
  height: 90vh;
}
#famerCalendar /deep/ .el-calendar__header {
  justify-content: space-between;
  padding: 12px 20px;
  border: none;
  text-align: center;
  background: #00284d;
  display: block;
}
#famerCalendar /deep/ .el-button-group {
  display: none;
}
#famerCalendar /deep/ .el-calendar__title {
  color: #fff;
  align-self: center;
  line-height: 3vh;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {
  background: #5c768d;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {
  background: #335371;
  color: #fff;
  padding: 1vh 0;
}
#famerCalendar /deep/ .el-calendar__body {
  padding: 0;
}
#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {
  padding-left: 3vw;
  width: 75%;
  /* height: 4vh;
    line-height: 4vh; */
}
#famerCalendar /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 10vw;
}
#famerCalendar .timeFilter {
  position: relative;
}
#famerCalendar /deep/ .el-calendar-table td {
  text-align: right;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  // padding: 1vh;
  padding: 0;
  height: 11.5vh;
}
#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {
  box-sizing: border-box;
  padding: 1vh;
}
#famerCalendar /deep/ .timeFilter:after {
  min-width: 2vw;
  white-space: nowrap;
  content: "日期";
  border-right: 1px solid #c0c4cc;
  padding: 0 0.2vw;
  box-sizing: border-box;
  /* line-height: 4vh; */
}
#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {
  border: none;
}
#famerCalendar /deep/ .el-drawer__header:focus-visible {
  border: none;
}
.cellInfoUl {
  width: 80%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.cellInfoUl::-webkit-scrollbar {
  display: none;
}
.cellInfo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1vh;
  box-sizing: border-box;
}
.tipMsg {
  position: absolute;
  display: flex;
  right: 0vh;
  bottom: 0vh;
  width: 2vw;
  height: 2vw;
  color: #fff;
}
.tipMsged {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-10%, -20%);
}
.tipMsg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0px;
  width: 0px;
  border-top: solid 2vw transparent;
  border-left: solid 2vw #3999e6;
  transform: rotateZ(-90deg);
}
.cellInfoUl li {
  width: 100%;
  line-height: 2.5vh;
  color: #fff;
  background: #61adeb;
  margin-bottom: 1vh;
  padding: 0 0.5vw;
  box-sizing: border-box;
  border-radius: 16px;
  text-align: center;
}
.cellInfoBox {
  text-align: center;
  /* color: #; */
}
.modeEach {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
  height: 78vh;
  overflow: hidden;
  overflow-y: scroll;
}
.modeEach::-webkit-scrollbar {
  display: none;
}
.footBox {
  width: 100%;
  padding: 2vh 1vw;
  box-sizing: border-box;
}
.modeEachs {
  width: 100%;
  min-height: 18vh;
  background: #3999e6;
  border-radius: 6px;
  padding: 2vh 1vw;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 1vh;
}
.setI {
  position: absolute;
  top: 1vh;
  right: 0.5vw;
  background: #fff;
  width: 2.5vh;
  height: 2.5vh;
  border-radius: 50%;
  text-align: center;
  line-height: 2.5vh;
  color: red;
}
.setIs {
  top: 1vh;
  right: 2vw;
  color: #3999e6;
}
.modeEachs span {
  font-size: 1.3vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 2.78vh;
}
.modeEachs span:nth-of-type(1) {
  min-width: 3vw;
  display: inline-block;
}
.footBox {
  text-align: right;
}
.emptyState {
  width: 100%;
  height: 60%;
  text-align: center;
}
.emptyState img {
  width: 80%;
  min-height: 100%;
}
.modeEached {
  text-align: center;
}
.modeEached p {
  font-size: 1.67vh;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 2.78vh;
}
.shadowBox {
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.15);
  padding: 1vh;
  box-sizing: border-box;
}
</style>

以上是“vue中如何使用element日歷組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！