Commit 9af92dbb02d2ac79899f82c3abdf86d28c510886
1 parent
1c6deccc
Exists in
master
and in
3 other branches
feat: 新增筛选组件
Showing
3 changed files
with
190 additions
and
0 deletions
Show diff stats
examples/router/routes.js
| @@ -31,11 +31,23 @@ const _components = [ | @@ -31,11 +31,23 @@ const _components = [ | ||
| 31 | component: () => import('@/views/docs/component/form.md'), | 31 | component: () => import('@/views/docs/component/form.md'), |
| 32 | }, | 32 | }, |
| 33 | { | 33 | { |
| 34 | + path: 'filter', | ||
| 35 | + name: 'filter', | ||
| 36 | + meta: { title: 'Filter 筛选' }, | ||
| 37 | + component: () => import('@/views/docs/component/filter.md'), | ||
| 38 | + }, | ||
| 39 | + { | ||
| 34 | path: 'table', | 40 | path: 'table', |
| 35 | name: 'table', | 41 | name: 'table', |
| 36 | meta: { title: 'Table 表格' }, | 42 | meta: { title: 'Table 表格' }, |
| 37 | component: () => import('@/views/docs/component/table.md'), | 43 | component: () => import('@/views/docs/component/table.md'), |
| 38 | }, | 44 | }, |
| 45 | + { | ||
| 46 | + path: 'scheme', | ||
| 47 | + name: 'scheme', | ||
| 48 | + meta: { title: 'Scheme 方案' }, | ||
| 49 | + component: () => import('@/views/docs/component/scheme.md'), | ||
| 50 | + }, | ||
| 39 | ], | 51 | ], |
| 40 | }, | 52 | }, |
| 41 | ]; | 53 | ]; |
| @@ -0,0 +1,85 @@ | @@ -0,0 +1,85 @@ | ||
| 1 | +# Filter 筛选 | ||
| 2 | + | ||
| 3 | +根据JSON Scheme配置自动生成一个筛选条件表单 | ||
| 4 | + | ||
| 5 | +## 基础用法 | ||
| 6 | + | ||
| 7 | +配置`list`属性设置JSON Scheme配置列表 | ||
| 8 | + | ||
| 9 | +::: snippet 通过`list`配置项目 | ||
| 10 | + | ||
| 11 | +```html | ||
| 12 | +<template> | ||
| 13 | + <div> | ||
| 14 | + <pre class="demo-model">{{ model }}</pre> | ||
| 15 | + <z-filter v-model="model" :list="list" @search="onSearch" @reset="onReset"></z-filter> | ||
| 16 | + </div> | ||
| 17 | +</template> | ||
| 18 | + | ||
| 19 | +<script> | ||
| 20 | +export default { | ||
| 21 | + data() { | ||
| 22 | + return { | ||
| 23 | + model: {}, | ||
| 24 | + list: [ | ||
| 25 | + { type: 'el-input', label: '姓名', key: 'name' }, | ||
| 26 | + { type: 'el-input', label: '年龄', key: 'age' }, | ||
| 27 | + { type: 'el-input', label: '省', key: 'province' }, | ||
| 28 | + { type: 'el-input', label: '市', key: 'city' }, | ||
| 29 | + { type: 'el-input', label: '区', key: 'area' }, | ||
| 30 | + { type: 'el-input', label: '地址', key: 'address' }, | ||
| 31 | + ] | ||
| 32 | + } | ||
| 33 | + }, | ||
| 34 | + methods: { | ||
| 35 | + onSearch(params) { | ||
| 36 | + console.log(JSON.parse(JSON.stringify(params))); | ||
| 37 | + }, | ||
| 38 | + onReset() { | ||
| 39 | + console.log('reset'); | ||
| 40 | + } | ||
| 41 | + } | ||
| 42 | +} | ||
| 43 | +</script> | ||
| 44 | +``` | ||
| 45 | + | ||
| 46 | +::: | ||
| 47 | + | ||
| 48 | +## 展示数量 | ||
| 49 | + | ||
| 50 | +默认展示数量为`3`个，可以通过配置而改变 | ||
| 51 | + | ||
| 52 | +::: snippet 设置`visibleNum`改变默认展示数量的大小，`span`改变每一项的占位数量 | ||
| 53 | + | ||
| 54 | +```html | ||
| 55 | +<template> | ||
| 56 | + <z-filter :list="list" :visibleNum="2" :span="8" size="mini"></z-filter> | ||
| 57 | +</template> | ||
| 58 | + | ||
| 59 | +<script> | ||
| 60 | +export default { | ||
| 61 | + data() { | ||
| 62 | + return { | ||
| 63 | + list: [ | ||
| 64 | + { type: 'el-input', label: '姓名', key: 'name' }, | ||
| 65 | + { type: 'el-input-number', label: '年龄', key: 'age', style: { width: '100%' }, props: { min: 0 } }, | ||
| 66 | + { type: 'el-input', label: '省', key: 'province' }, | ||
| 67 | + { type: 'el-input', label: '市', key: 'city' }, | ||
| 68 | + { type: 'el-input', label: '区', key: 'area' }, | ||
| 69 | + { type: 'el-input', label: '地址', key: 'address' }, | ||
| 70 | + ] | ||
| 71 | + } | ||
| 72 | + }, | ||
| 73 | +} | ||
| 74 | +</script> | ||
| 75 | +``` | ||
| 76 | + | ||
| 77 | +::: | ||
| 78 | + | ||
| 79 | +## API | ||
| 80 | + | ||
| 81 | +## Attribute 属性 | ||
| 82 | + | ||
| 83 | +参数|说明|类型|可选值|默认值 | ||
| 84 | +-|-|-|-|- | ||
| 85 | +list | JSON Scheme配置项列表 | Array | - | [] |
| @@ -0,0 +1,93 @@ | @@ -0,0 +1,93 @@ | ||
| 1 | +<template> | ||
| 2 | + <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size"> | ||
| 3 | + <div slot="$operation" class="zee-filter__button-group"> | ||
| 4 | + <el-button-group :size="size"> | ||
| 5 | + <el-button type="primary" @click="handleSearch"><span>查询</span></el-button> | ||
| 6 | + <el-button @click="handleReset"><span>重置</span></el-button> | ||
| 7 | + <el-button v-if="showCollapsed" @click="collapsed = !collapsed"> | ||
| 8 | + <span>{{ collapsed ? '展开' : '收起' }}</span> | ||
| 9 | + <!-- <i :class="`el-icon-arrow-${collapsed ? 'down' : 'up'}`" class="el-icon--right"></i> --> | ||
| 10 | + </el-button> | ||
| 11 | + </el-button-group> | ||
| 12 | + </div> | ||
| 13 | + </z-form> | ||
| 14 | +</template> | ||
| 15 | + | ||
| 16 | +<script> | ||
| 17 | +export default { | ||
| 18 | + name: 'Filter', | ||
| 19 | + props: { | ||
| 20 | + value: Object, | ||
| 21 | + list: Array, | ||
| 22 | + labelWidth: { | ||
| 23 | + type: String, | ||
| 24 | + default: '80px', | ||
| 25 | + }, | ||
| 26 | + size: { | ||
| 27 | + type: String, | ||
| 28 | + default: 'small', | ||
| 29 | + }, | ||
| 30 | + span: { | ||
| 31 | + type: Number, | ||
| 32 | + default: 6, | ||
| 33 | + }, | ||
| 34 | + visibleNum: { | ||
| 35 | + type: Number, | ||
| 36 | + default: 3, | ||
| 37 | + }, | ||
| 38 | + }, | ||
| 39 | + data() { | ||
| 40 | + return { | ||
| 41 | + collapsed: true, | ||
| 42 | + model: this.value || {}, | ||
| 43 | + }; | ||
| 44 | + }, | ||
| 45 | + watch: { | ||
| 46 | + value(val = {}) { | ||
| 47 | + this.model = val; | ||
| 48 | + }, | ||
| 49 | + model(val) { | ||
| 50 | + this.$emit('input', val); | ||
| 51 | + }, | ||
| 52 | + }, | ||
| 53 | + computed: { | ||
| 54 | + formattedList() { | ||
| 55 | + return [...this.list, { key: '$operation', label: '', labelWidth: '0px', span: !this.collapsed ? 24 : undefined }]; | ||
| 56 | + }, | ||
| 57 | + showCollapsed() { | ||
| 58 | + const { list, visibleNum } = this; | ||
| 59 | + return list.length > visibleNum; | ||
| 60 | + }, | ||
| 61 | + }, | ||
| 62 | + methods: { | ||
| 63 | + // 渲染列表项class | ||
| 64 | + colVisibleRender(item, index) { | ||
| 65 | + if (this.collapsed) { | ||
| 66 | + const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2; | ||
| 67 | + return index > visibleNumber && index < this.list.length ? 'zee-filter__item hidden' : 'zee-filter__item'; | ||
| 68 | + } | ||
| 69 | + return 'zee-filter__item'; | ||
| 70 | + }, | ||
| 71 | + // 搜索 | ||
| 72 | + handleSearch() { | ||
| 73 | + this.$emit('search', this.model); | ||
| 74 | + }, | ||
| 75 | + // 重置 | ||
| 76 | + handleReset() { | ||
| 77 | + this.model = {}; | ||
| 78 | + this.$emit('reset'); | ||
| 79 | + }, | ||
| 80 | + }, | ||
| 81 | +}; | ||
| 82 | +</script> | ||
| 83 | + | ||
| 84 | +<style> | ||
| 85 | +.zee-filter__item.hidden { | ||
| 86 | + display: none; | ||
| 87 | +} | ||
| 88 | +.zee-filter__button-group { | ||
| 89 | + width: 100%; | ||
| 90 | + box-sizing: border-box; | ||
| 91 | + text-align: right; | ||
| 92 | +} | ||
| 93 | +</style> |