Element-UI 要怎么学？官方文档！，2024年腾讯Java高级面试题及答案

Basic 组件

===========================================================================

Button 按钮

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/button

• 大部分用法是设置 button 的样式，注意 按钮组 的用法；

Link 文字链接

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/link

Layout 布局

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/layout

• Element UI 中是 24 分栏，迅速简便地创建布局。

• 一个布局组件由 el-row 和 el-col 组合构成，使用属性时要区分 行属性 与 列属性；

• <el-row :gutter="20"> 指定每一栏之间的间隔，默认间隔为 0；

• <el-col :span="24"> 用来组合一栏的布局，一栏是分为 24 部分；

• <el-col :span="6" :offset="6"> 中利用 offset 指定分栏偏移的栏数；

Container 布局容器

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi

• Container 是用于布局的容器组件，方便快速搭建页面的基本结构；

• 容器包含 <el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>；

Form 组件

==========================================================================

Radio 单选框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/radio

• 在使用 Radio 时至少加入 v-model 和 label 两个属性；

• 注意 Radio 按钮组；

Checkbox 多选框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/checkbox

Input 输入框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/input

• Input 为受控组件，它总会显示 Vue 绑定值。

• autocomplete 是一个带 输入建议 的输入框组件，也可以自定义输入建议显示模板；

• 事件的使用：

<el-input v-model=“username” @blur=“aaa” @focus=“bbb”

@clear=“clears” clearable @input=“ccc”>

• 方法的使用：

方法的使用

<el-button @click=“focusInputs”>focus方法

<el-button @click=“blurInputs”>blur方法

Select 选择器

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/select

• 事件的使用：

<el-select v-model=“cityId” @change=“aaa” multiple clearable>

<el-option v-for=“option in options” :label=“option.name”

:value=“option.id” :key=“option.id”>

• 方法的使用：

1.给组件通过ref起别名并绑定到vue实例中

<el-select ref=“selects” v-model=“cityId” @change=“aaa” multiple clearable>

…

2.调用方法

this.$refs.selects.focus(); //方法调用

Switch 开关

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/switch

• 事件的使用：

<el-switch v-model=“value” @change=“aaa”>

• 方法的使用：

<el-button @click=“bbb”>调用方法