elementui ref

获取组件实例的引用

在Element UI中，ref用于获取组件实例或DOM元素的引用，便于直接操作组件或访问其方法。通过ref属性标记组件，可在Vue实例中通过this.$refs访问。

基本用法

在模板中为组件添加ref属性：

<el-button ref="submitButton">提交</el-button>

在Vue实例中通过this.$refs访问：

this.$refs.submitButton.$el.focus(); // 操作DOM元素
this.$refs.submitButton.handleClick(); // 调用组件方法

表单验证示例

对el-form使用ref进行表单验证：

<el-form ref="formRef" :model="formData" :rules="rules">
  <el-form-item prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
</el-form>

通过ref调用表单验证方法：

this.$refs.formRef.validate(valid => {
  if (valid) {
    // 验证通过
  }
});

动态组件操作

对动态生成的组件（如el-table）使用ref：

<el-table ref="tableRef" :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
</el-table>

调用表格方法：

this.$refs.tableRef.clearSelection(); // 清空选中状态

注意事项

• ref在组件渲染完成后才可用，避免在created生命周期中访问。
• 多个同名ref会以数组形式返回。
• 函数式组件需通过vm.$refs访问内部元素。