使用js添加按钮，vue页面 el-calendar 添加自定义按钮

html代码：

<div class="schedule">
      <div class="title">
        今 日 日 程
      </div>
      <div class="allSchedule">
        <el-row class="addSchedule" type="flex" align="middle">
          <el-button class="but1" type="text" @click="intoShedule">添加日程</el-button>
        </el-row>
        <el-row class="todaySchedule" v-for="item in unRead" :key="item.index">
          <p class="unReadSchedule" type="text" @click="editShedule">
            {{ item.content }}
          </p>
        </el-row>
        <el-row class="show">
          <span>已显示全部日程</span>
        </el-row>
      </div>
    </div>

 

js代码：

// 默认渲染完成后
  mounted(){
    // 获取demo元素
    let parent = document.querySelector(
      ".el-calendar__header"
    )
    // 创建一个button元素
    let button = document.createElement("button")
    button.type = 'button' // 类型
    button.className = 'el-button el-button--plain el-button--mini' // Calendar默认按钮样式
    button.textContent = '全部日程' // 文本
    button.style.cssText = "background-color: #ff6a00;color:white;margin-left:auto" // 样式
    button.onclick = function(){ // 触发事件
      queryExistDataDays()
    }
    parent.appendChild(button) //添加
    var that = this
    function queryExistDataDays(){ // 事件内容
      const { href } = that.$router.resolve({
        path: "/scheduleManagementHome",
        // query: {
        //     id: row.id,
        //   },
        });
      window.open(href, '_blank');
      return Promise.resolve(false); // 不刷新表格
    }
  },

效果：