elementui method

ElementUI 常用方法

ElementUI 是基于 Vue.js 的组件库，提供丰富的 UI 组件及方法。以下是一些常用组件的方法说明：

表单验证方法

• validate：对整个表单进行校验，返回布尔值表示是否通过。

  this.$refs.form.validate((valid) => {
    if (valid) {
      console.log('验证通过');
    } else {
      console.log('验证失败');
    }
  });

• validateField：校验表单的指定字段。

  this.$refs.form.validateField('字段名', (errorMessage) => {
    if (!errorMessage) {
      console.log('字段验证通过');
    }
  });

• resetFields：重置表单字段为初始值。

  this.$refs.form.resetFields();

表格方法

• clearSelection：取消表格的多选状态。

  this.$refs.table.clearSelection();

• toggleRowSelection：切换某行的选中状态。

  

  this.$refs.table.toggleRowSelection(row, isSelected);

• sort：对表格数据进行排序。

  this.$refs.table.sort('prop', 'order');

消息提示方法

• Message：全局消息提示。

  this.$message.success('操作成功');
  this.$message.error('操作失败');

• MessageBox：弹框确认。

  

  this.$confirm('确认删除？', '提示', {
    type: 'warning'
  }).then(() => {
    console.log('确认操作');
  }).catch(() => {
    console.log('取消操作');
  });

对话框方法

• close：手动关闭 Dialog。

  this.$refs.dialog.close();

树形控件方法

• getCheckedNodes：获取选中的节点数据。

  const nodes = this.$refs.tree.getCheckedNodes();

• setCheckedKeys：通过 key 设置选中节点。

  this.$refs.tree.setCheckedKeys([key1, key2]);

分页方法

• handleSizeChange：每页条数变化时触发。

  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  }

• handleCurrentChange：当前页变化时触发。

  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  }

注意事项

• 确保正确使用 $refs 引用组件实例。
• 表单验证需在 rules 中定义校验规则。
• 表格方法依赖 ref 绑定的表格实例。

如需更详细的 API 文档，可参考 ElementUI 官方文档。