flash-element-ui
v0.4.0
Published
基于elementUi的补充
Downloads
7
Readme
flash-ui
基于elementUi开发 需首先安装elementUi
npm install flash-element-ui --S
并全局引入elementUi样式
import 'element-ui/lib/theme-chalk/index.css'
引入本组件
npm install flash-element-ui --S
常用用法
tree editModel(type:Boolen,default: false) 编辑模式 true 开启编辑模式
editNode(node,data) 编辑模式下 点击编辑按钮触发 组件绑定方法可以获取到值(注意:编辑按钮点击后会暂时禁用数据监听,此时改变传入组件的数据不会触发组件的视图刷新)
checkNode(node,data) 编辑模式下 点击确认按钮触发,
cancelNode(node,data) 编辑模式下 点击确认按钮触发,
tree-select
disabled(type:Boolen,default:false) 禁用下拉框
width(type:String,default: '240') 下拉弹出框宽度
lazy(type:Boolen,default:false) 子节点是否异步加载 若异步加载 需传入loadNode
loadNode(type:Function,default:undefind) 异步加载方法 function(node, resolve) 同elementUI
onlyChild(type:Boolen,default:false) 父节点是否可选中 默认可选 如传入true 且某项父节点 定制选中 可以通过数据传入disable:true 单独控制
isFullName(type:Boolen,default:false) 是否使用全称 开启后输入框内显示 父节点 - 子节点 (限单选)
breakKey(type:String,default: ' - ') 搭配isFullName属性使用 可自定义分隔符
showCheckbox(type: Boolean,default: false) 显示复选框 搭配多选功能使用
multiple(type:Boolen,default:false) 多选功能
v-model 绑定的为树节点id 默认取id,可通过props变更 若传入得props无id字段则取label字段的值 多选时为逗号隔开的字符串
@getValueName(name(type: String || Array)) 可以获取选中的字段label 多选时为所有选中节点的label 若想获取选中框内显示部分则调用showNodes方法
@showNodes(node(type:Array)) 多选时提供 参数为展示的所有节点(不包含选中节点的子节点)
update
0.3.0 新增多选菜单功能 value绑定值为id数组字符串 逗号隔开
0.3.7 新增disabled选项 可以控制禁用下拉选择
0.3.8 树组件 添加slot插槽 可以自定义按钮了
0.3.9 修改slot插槽功能 支持自定义按钮和默认按钮混用
0.4.0 添加editable模式, 此模式下点击编辑按钮会显示块内编辑框 点击编辑会显示在当前节点显示输入框
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.