Element UI常用部分组件简要介绍一

安装Element UI

首先，你需要在你的项目中安装Element UI。可以通过npm或者yarn进行安装。打开终端并运行以下命令：

npm install element-ui
# 或者
yarn add element-ui

引入Element UI

要使用Element UI，你需要在你的Vue.js项目中引入它。你可以在main.js（或者其他入口文件）中添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用Element UI组件

  

 

Form表单

 

在这个例子中，我们使用el-form组件来创建一个表单。我们通过props将formData传递给el-form作为表单数据的绑定对象。通过el-form-item组件，我们定义了表单的项，包括姓名和年龄。我们使用v-model指令将输入框的值与formData中对应的属性进行双向绑定。

我们还定义了formRules对象来指定表单项的验证规则。在提交表单时，我们使用this.$refs.form.validate()方法对表单进行验证，如果验证通过，则可以提交表单数据。

 Tbale表格

在这个例子中，我们使用el-table组件来展示一个简单的表格。我们通过props将tableData传递给el-table作为表格的数据源。通过el-table-column组件，我们定义了表格的列，并使用prop属性指定对应数据源中的属性。

border属性用于显示表格边框，stripe属性用于显示交替的行背景色。

Tree树型控件基础用法

       
data(){
    return{
     defaultProps: {
          children: 'children', //指定子树为节点对象的某个属性值
          label: 'label' //指定节点标签为节点对象的某个属性值
        }
    }
}

// setCheckedKeys(key) 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性

在这个例子中，我们使用了el-tree组件来创建一个基本的树型结构,props传递了deptList数据源,

还使用defaultProps来指定数据源中的属性名称,以便正确地渲染树节点的标签和子节点.

Button组件

在这个例子中，我们使用了el-button组件来创建几个不同样式的按钮。type属性用于设置按钮的样式，包括主要按钮、默认按钮、成功按钮等等

总结

在本篇博客中，简要介绍了如何快速入门并使用Element UI。我们学习了如何安装Element UI、引入Element UI并开始使用它的部分组件.

Element UI提供了丰富的组件和工具，可以帮助你快速构建漂亮的Web界面。如果你想了解更多关于Element UI的信息，可以查阅官方文档，里面有更详细的组件使用说明和示例。

后续会继续更新,希望本文对你有所帮助，祝你在使用Element UI时顺利进行！如果你有任何问题，欢迎在下方留言。谢谢阅读！