Element中组件的使用

可输入远程搜索的下拉框

<el-autocomplete
            v-model="searchDetail"
            :fetch-suggestions="searchDetailFunc"
            placeholder="请输入内容"
            prefix-icon="iconfont iconsousuo1"
            @select="handleSelect"
   ></el-autocomplete>            
          
          
          
          // 搜索显示的
    searchDetailFunc (query, cb) {
      this.searchData = []
      let params = {
        pageSize: 10,
        pageNo: 1,
        keyword: this.searchDetail
      }
      projectService.getAllProjects(params).then(res => {
        res.data.list.forEach(item => {
          this.searchData.push({
            value: item.pname,
            address: item.id,
            type: item.type,
            id: item.id,
            pname: item.pname
          })
        })
        cb(this.searchData)
      })
    },    },
    querySearch (queryString, cb) {
      let results = []
      cb(results)
    },

time-line的时间在上的格式和v-clipboard一键复制功能

<el-timeline v-if="timeLineData.length > 0">
        <el-timeline-item
          v-for="(activity, index) in timeLineData"
          :key="index"
          placement="top"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
        >
          <p class="timestamp timeBlock">
            {{ activity.crtTs | timeFormData }}<span
              v-if="timeSlot"
              class='time-type'
              >{{ typeFun(activity.type) }}</span
            >
            <span class="recode-progress">
              <el-progress :percentage="percentageFun(activity.progress)" color="#1add70" :stroke-width="10"></el-progress>
              </span>
              <span class="recode-person"><i class="iconfont iconicon- ico-person"></i>填写人 : &nbsp;{{activity.crtUser.showValue ||'-'}}</span>
          </p >
          <p class="word-content timeBlock">
            <i
              class="el-icon-copy-document"
              v-clipboard:copy="activity.march"
              v-clipboard:success="copy"
              v-clipboard:error="onError"
              v-if="isCopy"
            ></i>
             <span v-html="showText(activity.march)" class="describe-content"></span>
          </p >
        </el-timeline-item>
      </el-timeline>
   copy (e) {
      this.$message({
        message: '复制成功！',
        type: 'success'
      })
    },
    onError (e) {
      this.$message({
        message: '复制失败！',
        type: 'error'
      })
    }

时间天数组件el-date-picker

<el-form-item label="计划时间" required>
                <el-col :span="7">
                  <!-- @change="validStartDate" -->
                    <el-form-item prop="planStartTime">
                        <el-date-picker type="date" placeholder="开始日期" v-model="projectForm.planStartTime" style="width:167px;"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="forbbidenEdit"  :picker-options="startDatePicker"></el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <el-col class="textCenter" :span="2">&nbsp;&nbsp;</el-col> -->
                <el-col :span="7" >
                    <el-form-item prop="planCloseTime" style="margin-left:38px;">
                      <!-- @change="validEndDate" -->
                        <el-date-picker type="date" placeholder="结束日期" v-model="projectForm.planCloseTime"  style="width:167px;"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="forbbidenEdit"  :picker-options="endDatePicker"></el-date-picker>
                    </el-form-item>
                </el-col>
 </el-form-item>
 
 
 //一种使用
 // validStartDate (startDate) {
    //   if (
    //     new Date(startDate).getTime() >=
    //                 new Date(this.projectForm.planCloseTime).getTime()
    //   ) {
    //     Toast('开始时间不能晚于结束时间', 'warning')
    //     this.projectForm.planStartTime = ''
    //   }
    // },
    // validEndDate (endDate) {
    //   if (new Date(endDate).getTime() < new Date(this.projectForm.planStartTime).getTime()) {
    //     Toast('结束时间不能早于开始时间', 'warning')
    //     this.projectForm.planCloseTime = ''
    //   }
    //   if (new Date(endDate).getTime() + 3600 * 1000 * 24 < Date.now()) {
    //     Toast('结束时间不能早于当前时间', 'warning')
    //     this.projectForm.planCloseTime = ''
    //   }
    // },
    
    
    
   //置灰不能选
    
    data(){
    return{
    startDatePicker:this.beginDate(),
      endDatePicker: this.processDate()
      }
      }
      
      
      beginDate () {
      const self = this
      return {
        disabledDate (time) {
          if (self.projectForm.planCloseTime) { // 如果结束时间不为空，则小于结束时间
            return new Date(self.projectForm.planCloseTime).getTime() - 3600 * 1000 * 24 < time.getTime()
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate () {
      const self = this
      return {
        disabledDate (time) {
          const minTime = (self.projectForm.planStartTime && (new Date(self.projectForm.planStartTime).getTime() > Date.now())) ? (new Date(self.projectForm.planStartTime).getTime()) : Date.now() - 3600 * 1000 * 24
          console.log(time.getTime(), minTime, time.getTime() < minTime)
          return time.getTime() < minTime
          // if (self.projectForm.planStartTime) { // 如果开始时间不为空，则结束时间大于开始时间
          //   return new Date(self.projectForm.planStartTime).getTime() > time.getTime()
          // } else {
          //   return time.getTime() > Date.now()// 开始时间不选时，结束时间最大值小于等于当天
          // }
        }
      }
    },

el-dialog可随点击按钮的位置动态改变

onMouseover (params) {
      this.orgContent = params.relatedTarget.innerText
      this.isOrgContent = true
      console.log(params.clientY, ''Y'')
      console.log(params.clientX, ''X'')
      this.orgContentStyle = {
        position: ''absolute'',
        top: params.clientY + ''px'',
        left: params.clientX + ''px''
      }
      let childDom = this.$refs.childDialog
      childDom.style = {
        position: ''absolute'',
        top: params.clientY + ''px'',
        left: params.clientX + ''px''
      }
    },