开发中会遇见的一些element组件 |
您所在的位置：网站首页 › vue的element-ui的tree组件拖拽功能 › 开发中会遇见的一些element组件 |
|
el-tree(树形控件)
清晰显示层级构造展示信息 (利用递归返回数据) 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(表格)表格展示 {{ row.username.charAt(1) }} 正式员工 试用员工 临时员工 查看 角色 删除:data="employList(数组定义的名字)" : 数据库返回显示的数据 prop: 每个表格的名字 表格里可使用插槽 插入按钮等 charAt(number类型): 可以取到字符串的第几个字符 详细用法可以进入: 组件 | Element 查看 el-pagination(分页)如表格数据过多时可以使用分页分解数据 current-change: 当前页数 page-sizes: 每页显示多少条数据 page-size: 每页最多显示多少条数据(和上一属性不一样 这两容易看混) layout: 组件布局(调换每个单词可以让位置改变) total: 总数据有多少条 (填写数据库返回的值, 数据会更新最好不要填写固定值) 详细用法可以进入: 组件 | Element 查看 el-dialog(对话框)触发事件后弹出一个对话框 可以退出登录时只插入确定取消按钮 提示用户是否退出登录;也可以插入表单(el-dailog标签直接包裹表单标签即可) 此插件详细用法可以进入: 组件 | Element 查看 el-form(表单)由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 可利用作用域插槽插入其他组件 常用插件详细用法可以进入: 组件 | Element 查看 el-switch(开关) export default { data() { return { value: true } } }active-color: 打开时的背景色 inactive-color: 关闭时的背景色 active-value: 打开时的值 inactive-value: 关闭时时的值 详细用法可以进入: 组件 | Element 查看 el-cascader(级联选择器)当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择 (利用递归返回数据) separator: 改变分隔符 详细用法可以进入: 组件 | Element 查看 el-upload(文件上传)通过点击或者拖拽上传文件 将文件拖到此处，或点击上传 只能上传jpg/png文件，且不超过500kbdrag: 是否启用拖拽上传 multiple: 是否支持多选文件 详细用法可以进入: 组件 | Element 查看 el-select/option(选择器)当选项过多时，使用下拉菜单展示并选择内容 vue-count-to(数字跳动到设定值)1.安装插件 $ npm i vue-count-to 2.引入 import CountTo from 'vue-count-to' export default { components: { CountTo } }3.使用count-to代替需要显示的数字 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 } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |