feat(components): 添加高级搜索表单组件并优化现有表格组件

- 新增 CuteSearchFormPro 组件支持输入框、选择框、日期时间等多种字段类型
- 为 CuteEditTable 组件的输入框和选择框添加清空功能
- 在组件演示页面集成并展示新的高级搜索表单 Pro 版
- 配置搜索表单 Pro 版的数据源和默认值示例
- 实现搜索表单的验证提交和重置功能
This commit is contained in:
2026-02-02 16:54:52 +08:00
parent d2b96186b5
commit 3ff0a08cfb
3 changed files with 202 additions and 0 deletions
@@ -11,6 +11,8 @@
<el-button type="primary">查询后置按钮</el-button>
</template>
</cute-search-form>
<cute-section-title title="高级搜索Pro版 CuteSearchFormPro" />
<cute-search-form-pro :model="searchFormProValues" :schema="searchFormProSchema" />
<cute-section-title title="横向滚动 CuteHorizontalScrollBar" />
<cute-horizontal-scroll-bar>
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
@@ -73,10 +75,12 @@ import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
import CuteButton from '@/views/components/dev/CuteButton.vue'
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
import CuteSearchFormPro from '@/views/components/dev/CuteSearchFormPro.vue'
export default {
name: 'CuteOtherDemo',
components: {
CuteSearchFormPro,
CuteTextAreaInput,
CuteTransfer,
CuteButton,
@@ -92,6 +96,13 @@ export default {
data() {
return {
searchFormModel: {},
searchFormProSchema: [
{ name: 'name', title: '姓名', type: 'input' },
{ name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
{ name: 'createDate', title: '创建日期', type: 'date' },
{ name: 'createTime', title: '创建时间', type: 'datetime' }
],
searchFormProValues: { name: '小明', sex: 'mm' },
leftDataSource: [
{ id: 1, name: '小明', description: '小明牛P' },
{ id: 2, name: '小红', description: '小红牛P', disabled: true },