列表编辑组件,适用于项目中的列表类编辑,如添加多个时间段等
暂无
- 支持行内列表编辑和块级列表编辑
- 编辑区域可通过slot方式定义
从npm安装ct-adc-list-editor
npm install ct-adc-list-editor --save
在代码中使用
import {Inline, Block} from 'index.js';
new Vue({
components: {
Inline,
Block
},
...
});
参数 | 说明 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|---|
removeButtonText | 删除按钮的文字 | String | 删除 | 任意字符串 | 删除按钮上显示的文字 |
addButtonText | 添加按钮的文字 | String | 添加 | 任意字符串 | 添加按钮上显示的文字 |
minCount | 至少几项 | Number | 0 | 任意正整数 / 0 | 列表至少要配几项 |
maxCount | 最多几项 | Number | -1(即不限制) | 任意正整数 / 0 / -1 | 列表最多可以配几项 |
initialCount | 起始有几项 | Number | 0 | 任意正整数 / 0 | 初始化时显示几项 |
step | 步长 | Number | 1 | 任意正整数 | 点一次添加按钮添加几项 |
emptyText | 为空文字 | String | 暂无数据 | 任意字符串 | 列表数量为0时显示的文字 |
removable | 是否可删 | Boolean Array | [] | 和外部数据length相同的数组,其中每一项为一个Boolean类型的值,表示该项是否可删除 | 每项是否可被删除 |
针对Block类型有以下几个属性:
参数 | 说明 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|---|
visible | 是否可见 | Boolean Array | [] | 和外部数据length相同的数组,其中每一项为一个Boolean类型的值,表示该项是否可见 | 每项是否可见 |
duration | 动画持续时长 | Number | 500 | 任意正整数 | 动画持续时长 单位 ms |
针对Inline类型有以下几个属性:
参数 | 说明 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|---|
hasHead | 是否需要头部 | Boolean | true | false/true | 是否需要头部 |
slot名称 | 说明 | 是否有默认内容 | scope |
---|---|---|---|
head | 头部slot | 是 | index(当前项的索引) |
head-form | 头部的form部分,即title的位置 | 是 | index(当前项的索引) |
head-remove | 头部的删除按钮所在部分,一般不会配置相关的内容 | 是 | index(当前项的索引) |
list | 列表slot | 是 | index(当前项的索引) |
list-form | 列表的form部分,用来放置编辑的内容 | 是 | index(当前项的索引) |
list-remove | 列表的删除按钮所在部分,一般是一个删除按钮 | 是 | index(当前项的索引) |
slot名称 | 说明 | 是否有默认内容 | scope |
---|---|---|---|
list | 列表slot | 是 | index(当前项的索引) |
list-head | 标题栏 | 是 | index(当前项的索引) |
list-head-title | 标题栏title | 是 | index(当前项的索引) |
list-head-remove | 标题栏删除按钮部分 | 是 | index(当前项的索引) |
list-form | 列表的form部分,用来放置编辑的内容 | 是 | index(当前项的索引) |
添加项
无
返回值
无
删除项
参数 | 说明 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|---|
index | 删除项的索引 | Number | 无 | 数据的索引 | 数据的索引 |
返回值 | 说明 | 类型 |
---|---|---|
删除是否成功 | 删除是否成功 | Boolean |
事件名称 | 说明 | 回调参数 | 描述 add | 添加事件 | count:新增的条数 | 点击添加按钮时触发的事件 remove | 删除事件 | index: 删除的项的索引 | 删除数据时触发的事件
更新日志
无