Element-UI 是一个基于 Vue.js 的组件库，其中包含了许多常用的 UI 组件和工具，如按钮、表单、日期选择器、弹框等等。本文将介绍如何在 Vue.js 中使用 Element-UI 组件库。
安装 Element-UI
首先，在项目中安装 Element-UI，使用以下命令：
npm install element-ui --save
在 Vue.js 项目中引入 Element-UI，将以下代码添加到 main.js 文件中：
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
通过这个简单的配置，就可以在 Vue.js 中使用 Element-UI 了。
使用 Element-UI 组件
下面，我们来看一些 Element-UI 常用的组件。
Button
Button 组件可以创建一个按键，用于触发某些动作。我们可以在 Vue.js 模板中使用以下代码来创建一个 Button：
<el-button>Click Me</el-button>
通过设定 Button 的 type 属性，我们可以定义不同类型的按钮，如主要的按钮、成功的按钮等：
<el-button type="primary">Primary Button</el-button> <el-button type="success">Success Button</el-button>
DatePicker
DatePicker 组件是个日期选择器。在 Vue.js 中使用 DatePicker，可以通过以下代码：
<el-date-picker v-model="date"></el-date-picker>
在以上代码中，我们使用了 v-model，这会将日期存储到我们的组件实例中的 date 变量中。
Input
Input 组件是一个可以输入文本的文本框。在 Vue.js 中使用 Input，可以通过以下代码：
<el-input v-model="inputValue"></el-input>
在以上代码中，我们使用了 v-model，这会将输入框中的内容存储到我们的组件实例中的 inputValue 变量中。
Table
Table 组件用于展示数据。在 Vue.js 中使用 Table，可以通过以下代码：
<el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table>
在以上代码中，我们使用了 :data，它接受一个数组，用于展示 Table 的数据。我们也定义了三个 Table Column，用于显示数据。
示例
下面是一个运用以上几个组件的例子：
-- -------------------- ---- -------
----------
-----
----------- -- -- ----------
---------- -------------- ---------------------------- ----- -----------------
-- ----------------------------------
--------------- ----------------------------------------
----------- ----- --------------------
--------- --------------------------------
-------- ------ ------------------
--------- ------------------
---------------- ----------- -------------------------------
---------------- ---------- ------------------------------
---------------- ------------- ---------------------------------
-----------
------
-----------
--------
------ ------- -
------ -
------ -
------------ ------
-------- ------ --------
------------- ---
----------- ---
---------- -
-
----- ----- -----
---- ---
------- ------
--
-
----- ----- -----
---- ---
------- --------
-
-
-
--
-------- -
---------------- -
---------------- - -----
-
-
-
---------总结
Vue.js 中使用 Element-UI 组件库非常容易，只需要安装 Element-UI 并在文件中引入即可。在本文中，我们介绍了一些常用的 Element-UI 组件，包括 Button、DatePicker、Input 和 Table，并且通过一个实例展示如何使用这些组件。希望这篇文章能提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e858bff6b2d6eab33dfc65