更新记录
1.0.5(2021-12-09) 下载此版本
r控件事件修正
1.0.4(2021-12-09) 下载此版本
修改事件重复提交问题
1.0.3(2021-12-09) 下载此版本
修正了事件触发
查看更多平台兼容性
thirdlucky-data-input
DataFormItem 数据驱动的表单项,在表单组件中使用
组件名:thirdlucky-data-input 代码块:
uDataFormItem
本组件是基于uni-app基础组件uni-easy-input的封装。本组件要解决问题包括:
- 数据绑定型组件:给本组件绑定一个data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能
注意事项 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 组件需要依赖
sass
插件 ,请自行手动安装- 本组件为数据驱动,目的是快速投入使用,只可通过 style 覆盖有限样式,不支持自定义更多样式
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另行文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
设置 columns
属性后,组件会通过数据渲染出对应的内容
<template>
<view>
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item class="form-item" v-for="(column, index) in columns" :key="index" :label="column.info">
<thirdlucky-data-input ref="`item${index}`" :column="column" v-model="formData[column.name]"></thirdlucky-data-input>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
export default {
props: {
formData: {
type: Object,
required: false,
default() {
return {};
}
},
rules: {
type: Object,
required: false,
default() {
return {};
}
},
columns: {
type: Array,
required: true,
default() {
return [];
}
},
},
};
</script>
API
DataTable Props
属性名 | 类型 | 可选值 | 默认值 | 说明 | 示例 | |
---|---|---|---|---|---|---|
columns | Array | - | 必填,列头 | columns: [{name: 'calendarType',info: '类型',tips: '请输入类型',type: 'text'}] |