Vue教学17：Element UI基础组件上手，打造美观实用的Vue应用

大家好，欢迎回到我们的Vue教学系列博客！在前十六篇博客中，我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定（单向与双向）、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值（props和$emit）、动态组件和异步组件、组件间的通信（provide/inject，event bus），以及探索并尝试安装一个基于Vue.js的UI框架——Element UI。今天，我们将深入探讨并学习如何使用Element UI的基础组件，以打造美观实用的Vue应用。无论你是Vue新手小白，还是有一定基础的开发者，掌握Element UI的基础组件都将大大提高你的开发效率。

一、Element UI基础组件概览

Element UI提供了丰富的组件，包括按钮、输入框、表格、弹窗、分页等。这些组件可以帮助我们快速搭建界面，提高开发效率。接下来，我们将学习一些常用的Element UI基础组件。

二、按钮组件（ElButton）

按钮组件（ElButton）是Element UI中非常基础且重要的组件之一，它用于触发各种操作或事件。按钮组件支持多种类型，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮等，每种类型的按钮都有其特定的样式和用途。

1. 按钮类型

按钮的类型决定了按钮的外观和默认行为。以下是一些常用的按钮类型：

• 主要按钮（Primary）：默认样式，通常用于主要操作。
• 成功按钮（Success）：表示成功的操作，如“保存”或“提交”。
• 信息按钮（Info）：表示提供信息或状态，如“详情”或“帮助”。
• 警告按钮（Warning）：表示可能会有副作用的操作，如“删除”或“取消”。
• 危险按钮（Danger）：表示危险或破坏性操作，如“删除”或“重置”。

<template><div><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></div>
</template>

在这个例子中，我们使用了不同类型的按钮，包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

2. 禁用状态

<template><div><el-button type="primary" :disabled="true">禁用按钮</el-button></div>
</template>

在这个例子中，我们通过:disabled="true"属性禁用了一个按钮。

3. 圆角按钮

<template><div><el-button type="primary" round>圆角按钮</el-button></div>
</template>

在这个例子中，我们通过round属性创建了一个圆角按钮。

4. 加载状态

按钮还可以显示加载状态，这通常用于表示后台操作正在进行中。

<el-button type="primary" :loading="loading">加载按钮</el-button>

在这个例子中，按钮的加载状态通过:loading="loading"绑定了一个布尔值。

5. 按钮尺寸

按钮有多种尺寸，包括大号按钮、小号按钮和默认尺寸。

<el-button type="primary" size="large">大号按钮</el-button>
<el-button type="primary" size="small">小号按钮</el-button>
<el-button type="primary" size="default">默认按钮</el-button>

在这个例子中，按钮有三种不同的尺寸，通过size属性进行设置。

6. 图标按钮

按钮可以包含图标，常用于需要视觉提示但不需要文字说明的情况。

<el-button type="primary" icon="el-icon-search">搜索按钮</el-button>

在这个例子中，按钮包含了一个搜索图标。

7. 按钮组

当需要放置多个相关按钮时，可以使用按钮组（Button Group）。

<el-button-group><el-button type="primary">上一页</el-button><el-button type="primary">下一页</el-button>
</el-button-group>

在这个例子中，两个按钮被放置在一个按钮组中，通常用于实现导航或切换功能。

三、输入组件（ElInput）

输入组件（ElInput）是Element UI中用于创建输入框的组件，它常用于收集用户数据，如文本、密码、数字等。ElInput组件支持多种类型，包括普通文本输入、密码输入、数字输入等，并且可以通过v-model指令实现双向数据绑定。

1. 基础用法

ElInput的基础用法非常简单，只需要在模板中添加<el-input>标签，并使用v-model指令绑定数据即可。

<template><div><el-input v-model="inputValue" placeholder="请输入内容"></el-input></div>
</template><script>
export default {data() {return {inputValue: ''};}
};
</script>

在这个例子中，我们创建了一个简单的文本输入框，用户可以在其中输入内容，输入框的内容会实时更新到inputValue数据属性中。

2. 类型

ElInput支持多种类型，包括：

• text：普通文本输入。
• password：密码输入，显示为点。
• number：数字输入，支持数字键盘。
• email：电子邮件输入，会自动校验邮箱格式。
• url：URL输入，会自动校验URL格式。

<template><div><el-input v-model="inputValue" placeholder="请输入内容" type="text"></el-input><el-input v-model="passwordValue" placeholder="请输入密码" type="password"></el-input><el-input v-model="numberValue" placeholder="请输入数字" type="number"></el-input><el-input v-model="emailValue" placeholder="请输入邮箱" type="email"></el-input><el-input v-model="urlValue" placeholder="请输入网址" type="url"></el-input></div>
</template><script>
export default {data() {return {inputValue: '',passwordValue: '',numberValue: '',emailValue: '',urlValue: ''};}
};
</script>

3. 禁用状态

输入组件也可以被禁用，禁用后的输入框将不可编辑。

<el-input v-model="inputValue" placeholder="请输入内容" :disabled="true"></el-input>

在这个例子中，输入框被设置为禁用状态，通过:disabled="true"绑定了一个布尔值。

4. 自动完成

ElInput支持自动完成功能，可以用于提示用户输入。

<el-input v-model="inputValue" placeholder="请输入内容" autocomplete="off"></el-input>

在这个例子中，通过autocomplete="off"属性禁用了浏览器的自动完成功能。

5. 自动聚焦

输入组件可以自动聚焦，以便用户直接开始输入。

<el-input v-model="inputValue" placeholder="请输入内容" autofocus></el-input>

在这个例子中，通过autofocus属性使输入框在页面加载时自动聚焦。

6. 文本area

对于多行文本输入，可以使用textarea类型。

<el-input v-model="textareaValue" placeholder="请输入多行文本" type="textarea"></el-input>

在这个例子中，我们创建了一个多行文本输入框。

四、表格组件（ElTable）

表格组件（ElTable）是Element UI中用于显示和操作表格数据的组件，它提供了丰富的功能，如排序、筛选、分页等，非常适合展示复杂的数据列表。

1. 基础用法

<template><div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]};}
};
</script>

在这个例子中，我们使用el-table和el-table-column组件创建了一个简单的表格，并使用:data="tableData"属性绑定了表格数据。

2. 表格操作

<template><div><el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [// ... 省略数据部分],multipleSelection: []};},methods: {handleSelectionChange(val) {this.multipleSelection = val;}}
};
</script>

在这个例子中，我们添加了一个多选列，并定义了一个handleSelectionChange方法，用于处理表格行的选中状态变化。

3. 表格属性

ElTable支持多种属性，用于控制表格的行为和样式：

• :data="tableData"：绑定表格的数据源。
• style="width: 100%"：设置表格的宽度。
• max-height="200px"：设置表格的最大高度。
• border：是否显示表格边框。

4. 列属性

ElTableColumn支持多种属性，用于控制列的行为和样式：

• prop：列对应的数据字段。
• label：列的标题。
• width：列的宽度。
• sortable：是否启用列的排序功能。
• filters：列的筛选条件。
• show-overflow-tooltip：是否显示溢出内容的工具提示。

5. 排序

要启用表格的排序功能，只需要在<el-table-column>中设置sortable属性为true。

<el-table-column prop="date" label="日期" width="180" sortable></el-table-column>

在这个例子中，日期列被设置为可排序的。

6. 筛选

表格的筛选功能通过filters属性实现，它是一个对象数组，每个对象定义了一个筛选条件。

<el-table-column prop="date" label="日期" width="180"><template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>

在这个例子中，我们创建了一个简单的筛选模板，用于显示日期列的值。

7. 分页

要实现表格的分页功能，可以使用<el-pagination>组件，并通过:current-page="currentPage"和:page-size="pageSize"属性绑定当前页和每页条数。

<template><div><el-table :data="tableData" style="width: 100%"><!-- ... 省略其他列定义 --></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="100"></el-pagination></div>
</template><script>
export default {data() {return {tableData: [],currentPage: 1,total: 100    };},methods: {handleSizeChange(newSize) {console.log(`每页 ${newSize} 条`);},handleCurrentChange(newPage) {this.currentPage = newPage;console.log(`当前页: ${newPage}`);}}
};
</script>

在这个例子中，我们结合了表格和分页组件，以实现数据的分页显示。

五、弹窗组件（ElDialog）

弹窗组件（ElDialog）是Element UI中用于创建模态对话框的组件，它允许我们在应用的顶层覆盖一个新页面，显示特定的信息或表单，直到用户与之交互。弹窗组件在处理用户输入、显示详细信息或确认操作时非常有用。

1. 基础用法

ElDialog的基础用法包括创建对话框和定义其内容。首先，你需要使用<el-dialog>标签包裹对话框，并使用title属性设置对话框的标题。

<template><div><el-button type="primary" @click="dialogVisible = true">打开对话框</el-button><el-dialog :visible.sync="dialogVisible" title="欢迎对话框"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false};}
};
</script>

在这个例子中，我们使用el-dialog组件创建了一个简单的模态对话框，并通过:visible.sync="dialogVisible"属性控制对话框的显示和隐藏。

2. 属性

ElDialog支持多种属性，用于控制对话框的行为和样式：

• :visible.sync="dialogVisible"：控制对话框的显示和隐藏，通常与Vue数据属性绑定。
• title="欢迎对话框"：设置对话框的标题。
• width="30%"：设置对话框的宽度。
• before-close：设置对话框关闭前的钩子函数。
• close-on-click-modal：点击模态背景是否关闭对话框。
• show-close：是否显示关闭按钮。

3. 插槽

ElDialog支持插槽，允许你在对话框内部自定义内容。除了默认的插槽外，还可以使用以下插槽：

• title：自定义对话框的标题区域。
• footer：自定义对话框的底部操作区域。

<el-dialog :visible.sync="dialogVisible" title="自定义对话框"><span>自定义内容</span><template v-slot:title><h2>自定义标题</h2></template><template v-slot:footer><el-button @click="dialogVisible = false">自定义按钮</el-button></template>
</el-dialog>

在这个例子中，我们自定义了对话框的标题和底部操作按钮。

4. 方法

ElDialog还提供了一些方法，用于控制对话框的行为：

• open()：打开对话框。
• close()：关闭对话框。

六、总结

通过本博客的学习，我们深入了解了Element UI的基础组件，包括按钮、输入框、表格、弹窗和分页等。这些组件是构建美观实用Vue应用的关键，它们不仅提供了丰富的功能，还支持样式定制，使得我们可以轻松打造符合需求的界面。

掌握Element UI的基础组件对于提高Vue.js应用的开发效率非常重要。它们不仅可以帮助我们节省时间，还能确保我们的应用拥有高质量的UI。希望这篇博客能帮助你深入理解Element UI的基础组件，并在实际项目中灵活运用。

如有任何疑问，欢迎在评论区留言讨论。让我们一起学习，共同进步！

往期教学请前往作者VUE专栏下查看