@riil-frontend/component-select-creator

creater a select data or CascaderSelect data

Usage no npm install needed!

<script type="module">
  import riilFrontendComponentSelectCreator from 'https://cdn.skypack.dev/@riil-frontend/component-select-creator';
</script>

README

SelectCreator

select-creator

Select 数据生成器； CascaderSelect 数据生成器。

功能概述：

  1. 可创建，编辑下拉类数据以及级联下拉类数据
  2. 可批量添加下拉类，级联下拉类数据（弹出层形式）
  3. 校验空值，同层重名，下级必填
  4. 可动态切换层数。
  5. 级联使用横向均等栅格布局，默认支持 10 层，若想实现更多层，请设置 zhCount 保证页面显示正常
  6. 只支持初始化赋值数据，不支持数据完全受控！使用方请通过 onChange 事件获取数据以及校验结果。
  7. 初始化数据为空时，SelectEditor 默认创建一条数据，label 为：选项；CascaderSelectEditor 默认创建一行数据，label 为一级选项->二级选项->三级选项->...

API

SelectCreator.SelectEditor

参数名 说明 必填 类型 默认值 备注
title 组件左上角标题 - string \xa0 默认值为空格符，为保证 Card 组件的 title 的占位
onChange 组件数据变化回调 必填 (data:[],isPass:boolean)=>{} data 为返回数据，isPass 为校验是否通过
defaultValue 组件初始值 - [{id,index,label}] -
disabled 组件禁用状态 - boolean false
delConfirmation 删除按钮提示,填充值为文本，则提示信息显示文本，设置为 false,则不显示弹出直接执行删除操作 - boolean string 已有用户下该属性也会删除，是否确认?

SelectCreator.CascaderSelectEditor

参数名 说明 必填 类型 默认值 备注
level 级联层数 - int 3
hasBatch 是否显示批量添加按钮 - boolean true
defaultValue 组件初始数据 - [{id,index,label,parent}] -
onChange 组件数据变化回调 必填 (data:[],isPass:boolean)=>{} - data 为返回数据，isPass 为校验是否通过
zhCount 层数汉化常量 - array ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
disabled 组件禁用状态 - boolean false
delConfirmation 删除按钮提示,填充值为文本，则提示信息显示文本，设置为 false,则不显示弹出直接执行删除操作 - boolean string 已有用户下该属性也会删除，是否确认?

默认值以及返回数据说明

参数名 说明 类型 备注
id 数据项唯一标示符 id string
label 下拉项显示名称 string 校验规则不能为空，同层不能重名
index 下拉排序序号 int 0->n
parent 级联数据中描述上层节点的 id string