Element-ui介绍及文档
图标样式使用
-
一般情况下，使用
i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（可使用icon属性，例如el-button），设置icon属性为对应的图标名。<i class='el-icon-user-solid'></i>
<el-button icon='el-icon-delete-solid'>删除</el-nutton>
指令样式使用
例如Loading加载，其提供的是一个指令v-loading，使用时直接调用就行。
<el-table v-loading='true' :data="tableData">
<el-table-column prop="name" label="姓名">
</el-table>
事件样式使用
例如Message消息提示，结合事件使用。
<el-button :plain="true" @click="successMessage">成功</el-button>
<el-button :plain="true" @click="warnMessage">警告</el-button>
<el-button :plain="true" @click="infoMessage">普通消息</el-button>
<el-button :plain="true" @click="errorMessage">错误</el-button>
errorMessage(){
this.$message({
message: "错误消息",
type: "error"
})
},
infoMessage(){
this.$message("普通消息")
},
successMessage(){
this.$message({
message: "成功信息",
type: "success"
})
},
warnMessage(){
this.$message({
message: "警告信息",
type:"warning"
})
},
method
组件内置的方法，使用时可以通过组件自身调用，使用步骤如下：
-
组件设置
ref属性 -
通过
this.$refs.ref属性名.方法()调用组件自身的method方法例如
el-input组件提供了focus()方法，获取焦点
Container 布局容器
用于布局的容器组件，方便快速搭建整个页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
分页
size-change 每页展示的数量改变时，触发
current-change当前页码 变动时候触发的事件
page-sizes 可选择的页面展示数量，如[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
page-size 当前 每页展示的数量
current-page 当前的页码
导航菜单
el-menu, 菜单 ， 默认垂直模式，通过mode='horizontal'改为水平模式
el-menu-item，菜单项
el-submenu，子菜单
el-menu-item-group 菜单项组
default-active 默认激活的选项， 如default-active="2"就是第二项默认激活
open 打开 子菜单 的事件
close 关闭 子菜单 的事件
background-color='#545c64' 整体菜单栏的背景色
text-color = '#fff' 字体颜色
active-text-color= "#ffd04b" 激活项 的文本颜色
级联选择器
options, 下拉选项
clearable, 是否可以清空
placeholder, 提示信息占位符
v-model 绑定选择的值
change 值改变的事件，可以接收当前改变的新值
