el-tree(树形控件)
清晰显示层级构造展示信息 (利用递归返回数据)
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
class="filter-tree"
default-expand-all
/>
</div>
</template>
default-expand-all: 是否默认展开所有节点
show-checkbox: 显示勾选框
:default-expanded-keys="[1]": 默认展开的节点的 key 的数组 值为几就从几级节点展开
data: 从数据库返回的数据 结构如下:
data2: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
defaultProps: {
children: '可自定义成数据库返回数据的名称',
label: '同上'
}
详细用法可以进入: 组件 | Element 查看
el-table(表格)
表格展示
<el-table :data="employList">
<el-table-column prop="staffPhoto" align="center">
<template slot-scope="{row}">
<span v-else class="username">{{ row.username.charAt(1) }}</span>
</template>
</el-table-column>
<el-table-column prop="username" label="姓名" />
<el-table-column prop="mobile" label="手机号" sortable />
<el-table-column prop="workNumber" label="工号" sortable />
<el-table-column prop="formOfEmployment" label="聘用形式">
<template slot-scope="{row}">
<span v-if="row.formOfEmployment === 1"> 正式员工 </span>
<span v-else-if="row.formOfEmployment === 2"> 试用员工 </span>
<span v-else> 临时员工 </span>
</template>
</el-table-column>
<el-table-column prop="departmentName" label="部门" />
<el-table-column prop="timeOfEntry" label="入职时间" sortable />
<el-table-column label="操作" width="280px">
<template #default="{row}">
<el-button size="mini" type="text">查看</el-button>
<el-button size="mini" type="text">角色</el-button>
<el-button slot="reference" size="mini" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
:data="employList(数组定义的名字)" : 数据库返回显示的数据
prop: 每个表格的名字
表格里可使用插槽 插入按钮等
charAt(number类型): 可以取到字符串的第几个字符
详细用法可以进入: 组件 | Element 查看
el-pagination(分页)
如表格数据过多时可以使用分页分解数据
<el-pagination
@current-change="handleCurrentChange"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination>
current-change: 当前页数
page-sizes: 每页显示多少条数据
page-size: 每页最多显示多少条数据(和上一属性不一样 这两容易看混)
layout: 组件布局(调换每个单词可以让位置改变)
total: 总数据有多少条 (填写数据库返回的值, 数据会更新最好不要填写固定值)
详细用法可以进入: 组件 | Element 查看
el-dialog(对话框)
触发事件后弹出一个对话框
可以退出登录时只插入确定取消按钮 提示用户是否退出登录;也可以插入表单(el-dailog标签直接包裹表单标签即可)
此插件详细用法可以进入: 组件 | Element 查看
el-form(表单)
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
可利用作用域插槽插入其他组件
常用插件详细用法可以进入: 组件 | Element 查看
el-switch(开关)
<el-switch
v-model="formData.state"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0"
>
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
}
</script>
active-color: 打开时的背景色
inactive-color: 关闭时的背景色
active-value: 打开时的值
inactive-value: 关闭时时的值
详细用法可以进入: 组件 | Element 查看
el-cascader(级联选择器)
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择 (利用递归返回数据)
<el-cascader
separator="-"
:value="value"
:props="defaultProp"
:options="options"
@change="handleChange"
/>
separator: 改变分隔符
详细用法可以进入: 组件 | Element 查看
el-upload(文件上传)
通过点击或者拖拽上传文件
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
drag: 是否启用拖拽上传
multiple: 是否支持多选文件
详细用法可以进入: 组件 | Element 查看
el-select/option(选择器)
当选项过多时，使用下拉菜单展示并选择内容
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
vue-count-to(数字跳动到设定值)
1.安装插件 $ npm i vue-count-to
2.引入 import CountTo from 'vue-count-to'
export default {
components: {
CountTo
}
}
3.使用count-to代替需要显示的数字
<count-to
:start-val="0"
:end-val="228"
:duration="1000"
/>
start-val: 起始值
end-val: 终点值
duration:滚动时间
tree递归示例
export const arrTree = (list, rootId) => {
const arrs = []
list.forEach(item => {
if (item.pid === rootId) {
// item.children = arrTree(list, item.id)
const children = arrTree(list, item.id)
if (children.length) item.children = children
arrs.push(item)
}
})
return arrs
}
