利用this.$refs给el-input等控件赋值

如果是el-input可以这样写:

<el-input ref="input1" v-model="queryForm.taskName" clearable></el-input>

利用refs赋值

this.$refs.input1.value ="22"

如果是自己封装的组件

 <el-form-item label="时间范围">
   <time-range ref="timeRange" :left-width="150" :right-width="150" @change="dateChange" />
 </el-form-item>

我的组件是由两个el-date-picker组成的

<template>
  <div class="time-range">
    <el-date-picker
      v-model="startTime"
      class="date"
      type="date"
      size="small"
      placeholder="选择日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      clearable
      :style="{width:leftWidth+'px'}"
      :picker-options="startOptions"
    />
    <span>&nbsp;至&nbsp;</span>
    <el-date-picker
      v-model="endTime"
      class="date"
      type="date"
      size="small"
      placeholder="选择日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      clearable
      :style="{width:rightWidth+'px'}"
      :picker-options="endOptions"
    />
  </div>
</template>

利用refs给封装组件中的两个el-date-picker赋值

          const str = row.remindTime
          const str1 = str.split('到')[0]
          const str2 = str.split('到')[1]
          // 因为我的dateRange组件在打开对话框后才开始渲染，所以利用refs获取组件需要写在nexttikc中
          this.$nextTick(()=>{
            console.log('refffff:', this.$refs.timeRange)
            this.$refs.timeRange.$children[0].value = str1
            this.$refs.timeRange.$children[1].value = str2
          })