Skip to content

Commit 554e778

Browse files
kagolkagol
authored
feat(grid-select): [grid-select] add filter/config features and optimize demo/api docs (#2521)
* docs(grid-select): optimize demo/api * docs(grid-select): add radio-config/select-config demo/api docs * feat(grid-select): add filter and optimize demo/api docs
1 parent 7ad17d8 commit 554e778

File tree

10 files changed

+505
-14
lines changed

10 files changed

+505
-14
lines changed

‎examples/sites/demos/apis/grid-select.js

+108-7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,40 @@ export default {
55
name: 'grid-select',
66
type: 'component',
77
props: [
8+
{
9+
name: 'clearable',
10+
type: 'boolean',
11+
defaultValue: 'false',
12+
desc: {
13+
'zh-CN': '是否启用一键清除的功能',
14+
'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
15+
},
16+
mode: ['pc'],
17+
pcDemo: 'clearable',
18+
mfDemo: 'clearable'
19+
},
20+
{
21+
name: 'filterable',
22+
type: 'boolean',
23+
defaultValue: 'false',
24+
desc: {
25+
'zh-CN': '是否可搜索',
26+
'en-US': 'Is it searchable'
27+
},
28+
mode: ['pc'],
29+
pcDemo: 'filter-method'
30+
},
31+
{
32+
name: 'filter-method',
33+
type: '(query: string) => void',
34+
defaultValue: '',
35+
desc: {
36+
'zh-CN': '自定义过滤方法',
37+
'en-US': 'Custom filtering method'
38+
},
39+
mode: ['pc'],
40+
pcDemo: 'filter-method'
41+
},
842
{
943
name: 'grid-op',
1044
typeAnchorName: 'IGridOption',
@@ -39,6 +73,64 @@ export default {
3973
mode: ['pc'],
4074
pcDemo: 'multiple'
4175
},
76+
{
77+
name: 'radio-config',
78+
typeAnchorName: 'IRadioConfig',
79+
type: 'IRadioConfig',
80+
defaultValue: '',
81+
desc: {
82+
'zh-CN': '单选配置项',
83+
'en-US': 'Radio config'
84+
},
85+
mode: ['pc'],
86+
pcDemo: 'config'
87+
},
88+
{
89+
name: 'remote',
90+
type: 'boolean',
91+
defaultValue: 'false',
92+
desc: {
93+
'zh-CN': '是否为远程搜索',
94+
'en-US': 'Is it a remote search'
95+
},
96+
mode: ['pc'],
97+
pcDemo: 'remote-method'
98+
},
99+
{
100+
name: 'remote-method',
101+
type: '(query:string) => void',
102+
defaultValue: '',
103+
desc: {
104+
'zh-CN': '远程搜索的方法',
105+
'en-US': 'Remote search methods'
106+
},
107+
mode: ['pc'],
108+
pcDemo: 'remote-method'
109+
},
110+
{
111+
name: 'reserve-keyword',
112+
type: 'boolean',
113+
defaultValue: 'false',
114+
desc: {
115+
'zh-CN': '多选可搜索时，是否在选中一个选项后仍然保留当前的搜索关键词',
116+
'en-US':
117+
'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
118+
},
119+
mode: ['pc'],
120+
pcDemo: 'remote-method'
121+
},
122+
{
123+
name: 'select-config',
124+
typeAnchorName: 'ISelectConfig',
125+
type: 'ISelectConfig',
126+
defaultValue: '',
127+
desc: {
128+
'zh-CN': '多选配置项',
129+
'en-US': 'Select config'
130+
},
131+
mode: ['pc'],
132+
pcDemo: 'config'
133+
},
42134
{
43135
name: 'text-field',
44136
type: 'string',
@@ -70,14 +162,23 @@ export default {
70162
type: 'interface',
71163
code: `
72164
interface IGridOption {
73-
data: Record<string, any>
74-
columns: {
75-
type: string
76-
field: string
77-
title: string
78-
width: number
79-
}[] // 表格列数据，用法同 Grid
165+
data: Record<string, unknown>
166+
columns: IColumnConfig[] // 表格列数据，同 Grid 组件的 IColumnConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
80167
}
168+
`
169+
},
170+
{
171+
name: 'IRadioConfig',
172+
type: 'interface',
173+
code: `
174+
同 Grid 组件的 IRadioConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
175+
`
176+
},
177+
{
178+
name: 'ISelectConfig',
179+
type: 'interface',
180+
code: `
181+
同 Grid 组件的 ISelectConfig：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid#api
81182
`
82183
}
83184
]

‎examples/sites/demos/pc/app/grid-select/config-composition-api.vue

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div>
3+
<p>场景1：单选</p>
4+
<br />
5+
<tiny-grid-select
6+
v-model="valueSingle"
7+
value-field="id"
8+
text-field="city"
9+
:grid-op="gridOpSingle"
10+
:radio-config="radioConfig"
11+
></tiny-grid-select>
12+
<br /><br />
13+
<p>场景2：多选</p>
14+
<br />
15+
<tiny-grid-select
16+
v-model="valueMulti"
17+
multiple
18+
value-field="id"
19+
text-field="city"
20+
:grid-op="gridOpMulti"
21+
:select-config="selectConfig"
22+
></tiny-grid-select>
23+
</div>
24+
</template>
25+
26+
<script setup>
27+
import { ref, reactive } from 'vue'
28+
import { TinyGridSelect } from '@opentiny/vue'
29+
30+
const valueSingle = ref('')
31+
const valueMulti = ref([])
32+
33+
const gridOpSingle = reactive({
34+
data: [
35+
{ id: '001', area: '华南区', province: '广东省', city: '广州市' },
36+
{ id: '002', area: '华南区', province: '广东省', city: '深圳市' },
37+
{ id: '003', area: '华南区', province: '广东省', city: '珠海市' },
38+
{ id: '004', area: '华南区', province: '广东省', city: '佛山市' },
39+
{ id: '005', area: '华南区', province: '广东省', city: '中山市' }
40+
],
41+
columns: [
42+
{ type: 'radio', title: '' },
43+
{ field: 'area', title: '区域', width: 90 },
44+
{ field: 'province', title: '省份', width: 60 },
45+
{ field: 'city', title: '城市', width: 60 }
46+
]
47+
})
48+
49+
const gridOpMulti = reactive({
50+
data: [
51+
{ id: '001', area: '华南区', province: '广东省', city: '广州市' },
52+
{ id: '002', area: '华南区', province: '广东省', city: '深圳市' },
53+
{ id: '003', area: '华南区', province: '广东省', city: '珠海市' },
54+
{ id: '004', area: '华南区', province: '广东省', city: '佛山市' },
55+
{ id: '005', area: '华南区', province: '广东省', city: '中山市' }
56+
],
57+
columns: [
58+
{ type: 'selection', title: '' },
59+
{ field: 'area', title: '区域', width: 90 },
60+
{ field: 'province', title: '省份', width: 60 },
61+
{ field: 'city', title: '城市', width: 60 }
62+
]
63+
})
64+
65+
const radioConfig = ref({
66+
trigger: 'row',
67+
checkMethod({ rowIndex }) {
68+
return rowIndex % 2 === 1
69+
}
70+
})
71+
72+
const selectConfig = ref({
73+
trigger: 'row',
74+
checkMethod({ rowIndex }) {
75+
return rowIndex % 2 === 0
76+
}
77+
})
78+
</script>
79+
80+
<style scoped>
81+
.tiny-grid-select {
82+
width: 280px;
83+
}
84+
</style>

‎examples/sites/demos/pc/app/grid-select/config.vue

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div>
3+
<p>场景1：单选</p>
4+
<br />
5+
<tiny-grid-select
6+
v-model="valueSingle"
7+
value-field="id"
8+
text-field="city"
9+
:grid-op="gridOpSingle"
10+
:radio-config="radioConfig"
11+
></tiny-grid-select>
12+
<br /><br />
13+
<p>场景2：多选</p>
14+
<br />
15+
<tiny-grid-select
16+
v-model="valueMulti"
17+
multiple
18+
value-field="id"
19+
text-field="city"
20+
:grid-op="gridOpMulti"
21+
:select-config="selectConfig"
22+
></tiny-grid-select>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import { TinyGridSelect } from '@opentiny/vue'
28+
29+
export default {
30+
components: {
31+
TinyGridSelect
32+
},
33+
data() {
34+
return {
35+
valueSingle: '',
36+
valueMulti: [],
37+
gridOpSingle: {
38+
data: [
39+
{ id: '001', area: '华南区', province: '广东省', city: '广州市' },
40+
{ id: '002', area: '华南区', province: '广东省', city: '深圳市' },
41+
{ id: '003', area: '华南区', province: '广东省', city: '珠海市' },
42+
{ id: '004', area: '华南区', province: '广东省', city: '佛山市' },
43+
{ id: '005', area: '华南区', province: '广东省', city: '中山市' }
44+
],
45+
columns: [
46+
{ type: 'radio', title: '' },
47+
{ field: 'area', title: '区域', width: 90 },
48+
{ field: 'province', title: '省份', width: 60 },
49+
{ field: 'city', title: '城市', width: 60 }
50+
]
51+
},
52+
gridOpMulti: {
53+
data: [
54+
{ id: '001', area: '华南区', province: '广东省', city: '广州市' },
55+
{ id: '002', area: '华南区', province: '广东省', city: '深圳市' },
56+
{ id: '003', area: '华南区', province: '广东省', city: '珠海市' },
57+
{ id: '004', area: '华南区', province: '广东省', city: '佛山市' },
58+
{ id: '005', area: '华南区', province: '广东省', city: '中山市' }
59+
],
60+
columns: [
61+
{ type: 'selection', title: '' },
62+
{ field: 'area', title: '区域', width: 90 },
63+
{ field: 'province', title: '省份', width: 60 },
64+
{ field: 'city', title: '城市', width: 60 }
65+
]
66+
},
67+
radioConfig: {
68+
trigger: 'row',
69+
checkMethod({ rowIndex }) {
70+
return rowIndex % 2 === 1
71+
}
72+
},
73+
selectConfig: {
74+
trigger: 'row',
75+
checkMethod({ rowIndex }) {
76+
return rowIndex % 2 === 0
77+
}
78+
}
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style scoped>
85+
.tiny-grid-select {
86+
width: 280px;
87+
}
88+
</style>

‎examples/sites/demos/pc/app/grid-select/filter-composition-api.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<tiny-grid-select
3+
v-model="valueSingle"
4+
filterable
5+
:filter-method="filter"
6+
value-field="id"
7+
text-field="city"
8+
:grid-op="gridOpSingle"
9+
></tiny-grid-select>
10+
</template>
11+
12+
<script setup>
13+
import { ref, reactive } from 'vue'
14+
import { TinyGridSelect } from '@opentiny/vue'
15+
16+
const valueSingle = ref('')
17+
18+
const gridOpSingle = reactive({
19+
data: [
20+
{ id: '001', area: '华南区', province: '广东省', city: '广州市' },
21+
{ id: '002', area: '华南区', province: '广东省', city: '深圳市' },
22+
{ id: '003', area: '华南区', province: '广东省', city: '珠海市' },
23+
{ id: '004', area: '华南区', province: '广东省', city: '佛山市' },
24+
{ id: '005', area: '华南区', province: '广东省', city: '中山市' }
25+
],
26+
columns: [
27+
{ type: 'radio', title: '' },
28+
{ field: 'area', title: '区域', width: 90 },
29+
{ field: 'province', title: '省份', width: 60 },
30+
{ field: 'city', title: '城市', width: 60 }
31+
]
32+
})
33+
34+
const filter = (value) => {
35+
if (!value) {
36+
return gridOpSingle.data
37+
}
38+
39+
return gridOpSingle.data.filter((item) => {
40+
return item.city.includes(value)
41+
})
42+
}
43+
</script>
44+
45+
<style scoped>
46+
.tiny-grid-select {
47+
width: 280px;
48+
}
49+
</style>

0 commit comments

Comments
 (0)