深色模式
SearchForm 查询表单
简单查询表单，通过配置项快速创建数据查询表单，常用于过滤表格或列表数据。
基本用法
点击查看代码
vue
<template>
<s-search-form :items="searchItems"></s-search-form>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
显示边框
点击查看代码
vue
<template>
<s-search-form :items="searchItems" border></s-search-form>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const searchItems = reactive([
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
表单项类型
点击查看代码
vue
<template>
<s-search-form :items="searchItems" showColon>
<template #dept="{ item, values }">
<el-select v-model="values[item.name]" style="width: 100%" placeholder="所属单位" clearable>
<el-option label="研发部" value="研发部" />
<el-option label="市场部" value="市场部" />
<el-option label="技术部" value="技术部" />
</el-select>
</template>
</s-search-form>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const searchItems = reactive([
{ label: "文本框", name: "textInput", type: "text" },
{ label: "数字框", name: "numberInput", type: "number" },
{ label: "下拉框", name: "selectInput", type: "select",
options: [ { label: "选项一", value: "option1" }, { label: "选项一", value: "option2" } ]
},
{ label: "日期框", name: "dateInput", type: "date" },
{ label: "时间框", name: "timeInput", type: "time" },
{ label: "插槽", name: "slotInput", type: "slot", scopedSlots: "dept" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表单布局
点击查看代码
vue
<template>
<s-form :labelWidth="120" :column="2" showColon>
<s-form-item label="表单项列数">
<el-radio-group v-model="searchFormCols">
<el-radio v-for="item in [2, 3, 4, 6]" :key="item" :label="item" :value="item" />
</el-radio-group>
</s-form-item>
<s-form-item label="表单项间距">
<el-slider v-model="searchFormGutter" style="margin: 0 10px;" :min="0" :max="50" />
</s-form-item>
</s-form>
<s-search-form :items="searchItems" :column="searchFormCols" :gutter="searchFormGutter" showColon></s-search-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const searchFormCols = ref(3);
const searchFormGutter = ref(8);
const searchItems = reactive([
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
表单尺寸
点击查看代码
vue
<template>
<s-form showColon>
<s-form-item label="表单尺寸">
<el-radio-group v-model="searchFormSize">
<el-radio v-for="item in searchFormSizeOptions" :key="item" :label="item.label" :value="item.value" />
</el-radio-group>
</s-form-item>
</s-form>
<s-search-form :items="searchItems" :size="searchFormSize" showColon></s-search-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const searchFormSize = ref(undefined);
const searchFormSizeOptions = reactive([
{ value: "small", label: "small" },
{ value: "default", label: "default" },
{ value: "large", label: "large" }
]);
const searchItems = reactive([
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
表单展开收起
点击查看代码
vue
<template>
<s-form :column="2" showColon>
<s-form-item label="允许收起">
<el-switch v-model="searchCollapsible" />
</s-form-item>
<s-form-item label="收起状态">
<el-switch v-model="searchCollapsed" />
</s-form-item>
</s-form>
<s-search-form :items="searchItems" :collapsible="searchCollapsible" v-model:collapsed="searchCollapsed" showColon>
</s-search-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const searchCollapsible = ref(true);
const searchCollapsed = ref(true);
const searchItems = reactive([
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
自定义操作栏
点击查看代码
vue
<template>
<s-search-form :items="searchItems" showColon>
<template #extra>
<el-button type="primary">拓展按钮</el-button>
</template>
</s-search-form>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const searchItems = reactive([
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20