Commit ca99566ededb524501f58b6ab87d6f9b3100a8cd
1 parent
f461f24e
Exists in
master
and in
2 other branches
feat: 优化组件默认size
Showing
10 changed files
with
38 additions
and
16 deletions
Show diff stats
examples/views/docs/component/schema-filter.md
| @@ -67,6 +67,7 @@ export default { | @@ -67,6 +67,7 @@ export default { | ||
| 67 | gender: '', | 67 | gender: '', |
| 68 | }, | 68 | }, |
| 69 | schema: { | 69 | schema: { |
| 70 | + props: { size: 'small' }, | ||
| 70 | items: [ | 71 | items: [ |
| 71 | { is: 'el-input', prop: 'name', label: '姓名' }, | 72 | { is: 'el-input', prop: 'name', label: '姓名' }, |
| 72 | { is: 'el-input', prop: 'age', label: '年龄' }, | 73 | { is: 'el-input', prop: 'age', label: '年龄' }, |
| @@ -104,6 +105,7 @@ export default { | @@ -104,6 +105,7 @@ export default { | ||
| 104 | gender: '', | 105 | gender: '', |
| 105 | }, | 106 | }, |
| 106 | schema: { | 107 | schema: { |
| 108 | + props: { size: 'small' }, | ||
| 107 | items: [ | 109 | items: [ |
| 108 | { is: 'el-input', prop: 'name', label: '姓名' }, | 110 | { is: 'el-input', prop: 'name', label: '姓名' }, |
| 109 | { is: 'el-input', prop: 'age', label: '年龄' }, | 111 | { is: 'el-input', prop: 'age', label: '年龄' }, |
| @@ -158,6 +160,7 @@ export default { | @@ -158,6 +160,7 @@ export default { | ||
| 158 | gender: '', | 160 | gender: '', |
| 159 | }, | 161 | }, |
| 160 | schema: { | 162 | schema: { |
| 163 | + props: { size: 'small' }, | ||
| 161 | items: [ | 164 | items: [ |
| 162 | { is: 'el-input', prop: 'name', label: '姓名' }, | 165 | { is: 'el-input', prop: 'name', label: '姓名' }, |
| 163 | { is: 'el-input', prop: 'age', label: '年龄' }, | 166 | { is: 'el-input', prop: 'age', label: '年龄' }, |
| @@ -221,6 +224,7 @@ export default { | @@ -221,6 +224,7 @@ export default { | ||
| 221 | gender: '', | 224 | gender: '', |
| 222 | }, | 225 | }, |
| 223 | schema: { | 226 | schema: { |
| 227 | + props: { size: 'small' }, | ||
| 224 | items: [ | 228 | items: [ |
| 225 | { is: 'el-input', prop: 'name', label: '姓名' }, | 229 | { is: 'el-input', prop: 'name', label: '姓名' }, |
| 226 | { is: 'el-input', prop: 'age', label: '年龄' }, | 230 | { is: 'el-input', prop: 'age', label: '年龄' }, |
examples/views/docs/component/schema-form.md
| @@ -23,7 +23,7 @@ export default { | @@ -23,7 +23,7 @@ export default { | ||
| 23 | address: '上海市青浦区华新镇纪鹤公路1988号', | 23 | address: '上海市青浦区华新镇纪鹤公路1988号', |
| 24 | }, | 24 | }, |
| 25 | schema: { | 25 | schema: { |
| 26 | - props: { labelWidth: '70px', size: 'small', span: 12 }, | 26 | + props: { labelWidth: '70px', span: 12 }, |
| 27 | items: [ | 27 | items: [ |
| 28 | { is: 'el-input', prop: 'name', label: '姓名' }, | 28 | { is: 'el-input', prop: 'name', label: '姓名' }, |
| 29 | { is: 'el-input-number', prop: 'age', label: '年龄' }, | 29 | { is: 'el-input-number', prop: 'age', label: '年龄' }, |
examples/views/docs/component/schema-page.md
| @@ -133,6 +133,7 @@ export default { | @@ -133,6 +133,7 @@ export default { | ||
| 133 | :api-delete="deleteAPI" | 133 | :api-delete="deleteAPI" |
| 134 | :api-new="newAPI" | 134 | :api-new="newAPI" |
| 135 | :api-edit="editAPI" | 135 | :api-edit="editAPI" |
| 136 | + size="small" | ||
| 136 | > | 137 | > |
| 137 | <template #table-cell-name="{ value, row, openDetail }"> | 138 | <template #table-cell-name="{ value, row, openDetail }"> |
| 138 | <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link> | 139 | <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link> |
examples/views/docs/component/schema-select.md
| @@ -278,4 +278,12 @@ export default { | @@ -278,4 +278,12 @@ export default { | ||
| 278 | </script> | 278 | </script> |
| 279 | ``` | 279 | ``` |
| 280 | 280 | ||
| 281 | -::: | ||
| 282 | \ No newline at end of file | 281 | \ No newline at end of file |
| 282 | +::: | ||
| 283 | + | ||
| 284 | +## API | ||
| 285 | + | ||
| 286 | +## Attribute 属性 | ||
| 287 | + | ||
| 288 | +参数|说明|类型|可选值|默认值 | ||
| 289 | +-|-|-|-|- | ||
| 290 | +schema | JSON Schema配置项列表 | Array | - | [] | ||
| 283 | \ No newline at end of file | 291 | \ No newline at end of file |
examples/views/docs/component/schema-table.md
| @@ -61,7 +61,7 @@ export default { | @@ -61,7 +61,7 @@ export default { | ||
| 61 | { name: '王五', age: '16', gender: '男' }, | 61 | { name: '王五', age: '16', gender: '男' }, |
| 62 | ], | 62 | ], |
| 63 | schema: { | 63 | schema: { |
| 64 | - props: { border: true, size: 'mini' }, | 64 | + props: { border: true }, |
| 65 | items: [ | 65 | items: [ |
| 66 | { prop: 'name', label: '姓名' }, | 66 | { prop: 'name', label: '姓名' }, |
| 67 | { prop: 'age', label: '年龄' }, | 67 | { prop: 'age', label: '年龄' }, |
| @@ -130,9 +130,9 @@ export default { | @@ -130,9 +130,9 @@ export default { | ||
| 130 | </template> | 130 | </template> |
| 131 | </el-table-column> | 131 | </el-table-column> |
| 132 | </template> | 132 | </template> |
| 133 | - <el-table-column label="操作" width="120"> | 133 | + <el-table-column label="右侧的列" width="120"> |
| 134 | <template #default="{ $index }"> | 134 | <template #default="{ $index }"> |
| 135 | - <el-button type="text">编辑第{{ $index + 1 }}行</el-button> | 135 | + 第{{ $index + 1 }}行 |
| 136 | </template> | 136 | </template> |
| 137 | </el-table-column> | 137 | </el-table-column> |
| 138 | </z-schema-table> | 138 | </z-schema-table> |
packages/schema-filter/index.vue
| @@ -84,7 +84,7 @@ export default { | @@ -84,7 +84,7 @@ export default { | ||
| 84 | }, | 84 | }, |
| 85 | formattedSchema() { | 85 | formattedSchema() { |
| 86 | return { | 86 | return { |
| 87 | - props: { span: this._span, 'label-width': '75px', size: this.filterSize || 'small', ...this._schemaProps }, | 87 | + props: { span: this._span, 'label-width': '75px', size: this.filterSize, ...this._schemaProps }, |
| 88 | items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }], | 88 | items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }], |
| 89 | }; | 89 | }; |
| 90 | }, | 90 | }, |
packages/schema-page/index.vue
| @@ -10,7 +10,7 @@ | @@ -10,7 +10,7 @@ | ||
| 10 | </div> | 10 | </div> |
| 11 | <!-- 筛选组件 --> | 11 | <!-- 筛选组件 --> |
| 12 | <div v-if="schema.filter" class="z-schema-page__filter"> | 12 | <div v-if="schema.filter" class="z-schema-page__filter"> |
| 13 | - <z-schema-filter :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch"> | 13 | + <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch"> |
| 14 | <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope"> | 14 | <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope"> |
| 15 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> | 15 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> |
| 16 | </template> | 16 | </template> |
| @@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
| 26 | </div> | 26 | </div> |
| 27 | <!-- 表格内容 --> | 27 | <!-- 表格内容 --> |
| 28 | <div v-if="schema.table" class="z-schema-page__table"> | 28 | <div v-if="schema.table" class="z-schema-page__table"> |
| 29 | - <z-schema-table :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange"> | 29 | + <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange"> |
| 30 | <template #left> | 30 | <template #left> |
| 31 | <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column> | 31 | <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column> |
| 32 | </template> | 32 | </template> |
| @@ -61,6 +61,7 @@ | @@ -61,6 +61,7 @@ | ||
| 61 | <!-- 分页器 --> | 61 | <!-- 分页器 --> |
| 62 | <slot v-if="schema.pagination !== false" name="pagination" v-bind="_slotScope"> | 62 | <slot v-if="schema.pagination !== false" name="pagination" v-bind="_slotScope"> |
| 63 | <el-pagination | 63 | <el-pagination |
| 64 | + :size="_size" | ||
| 64 | @size-change="onSizeChange" | 65 | @size-change="onSizeChange" |
| 65 | @current-change="onCurrentChange" | 66 | @current-change="onCurrentChange" |
| 66 | :current-page="currentPage" | 67 | :current-page="currentPage" |
| @@ -103,6 +104,7 @@ | @@ -103,6 +104,7 @@ | ||
| 103 | <z-schema-form | 104 | <z-schema-form |
| 104 | :key="`form-${modalType}`" | 105 | :key="`form-${modalType}`" |
| 105 | ref="form" | 106 | ref="form" |
| 107 | + :size="_size" | ||
| 106 | :value="valueForm" | 108 | :value="valueForm" |
| 107 | @input="e => $emit('update:value-form', e)" | 109 | @input="e => $emit('update:value-form', e)" |
| 108 | :schema="schema.form" | 110 | :schema="schema.form" |
| @@ -124,7 +126,7 @@ | @@ -124,7 +126,7 @@ | ||
| 124 | <!-- 详情弹出框内容 --> | 126 | <!-- 详情弹出框内容 --> |
| 125 | <template v-else-if="modalType === 'detail'"> | 127 | <template v-else-if="modalType === 'detail'"> |
| 126 | <template v-if="schema.form || schema.detail"> | 128 | <template v-if="schema.form || schema.detail"> |
| 127 | - <z-schema-form key="form-detail" ref="form" v-model="detail" :schema="schema.detail || detailSchema"> | 129 | + <z-schema-form key="form-detail" ref="form" v-model="detail" :size="_size" :schema="schema.detail || detailSchema"> |
| 128 | <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope"> | 130 | <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope"> |
| 129 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> | 131 | <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> |
| 130 | </template> | 132 | </template> |
| @@ -243,7 +245,7 @@ export default { | @@ -243,7 +245,7 @@ export default { | ||
| 243 | return Object.keys(this.$scopedSlots); | 245 | return Object.keys(this.$scopedSlots); |
| 244 | }, | 246 | }, |
| 245 | _size() { | 247 | _size() { |
| 246 | - return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size || 'small'; | 248 | + return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size; |
| 247 | }, | 249 | }, |
| 248 | _slotScope() { | 250 | _slotScope() { |
| 249 | const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading']; | 251 | const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading']; |
| @@ -298,7 +300,7 @@ export default { | @@ -298,7 +300,7 @@ export default { | ||
| 298 | methods: { | 300 | methods: { |
| 299 | tableSchemaDefaultProps(val) { | 301 | tableSchemaDefaultProps(val) { |
| 300 | const config = cloneDeep(val); | 302 | const config = cloneDeep(val); |
| 301 | - const defaultProps = { size: 'small', border: true, 'highlight-current-row': true }; | 303 | + const defaultProps = { border: true, 'highlight-current-row': true }; |
| 302 | if (config.props) { | 304 | if (config.props) { |
| 303 | return { ...config, props: { ...defaultProps, ...config.props } }; | 305 | return { ...config, props: { ...defaultProps, ...config.props } }; |
| 304 | } else { | 306 | } else { |
packages/schema-select/index.vue
| @@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
| 18 | v-model="model" | 18 | v-model="model" |
| 19 | :size="selectSize" | 19 | :size="selectSize" |
| 20 | :disabled="selectDisabled" | 20 | :disabled="selectDisabled" |
| 21 | - prefix-icon="el-icon-search" | 21 | + :prefix-icon="prefixIcon" |
| 22 | :placeholder="selectPlaceholder" | 22 | :placeholder="selectPlaceholder" |
| 23 | @input="debouncedOnInput" | 23 | @input="debouncedOnInput" |
| 24 | @focus="onInputFocus" | 24 | @focus="onInputFocus" |
| @@ -103,6 +103,10 @@ export default { | @@ -103,6 +103,10 @@ export default { | ||
| 103 | }, | 103 | }, |
| 104 | disabled: Boolean, | 104 | disabled: Boolean, |
| 105 | size: String, | 105 | size: String, |
| 106 | + prefixIcon: { | ||
| 107 | + type: String, | ||
| 108 | + default: 'el-icon-search', | ||
| 109 | + }, | ||
| 106 | placeholder: String, | 110 | placeholder: String, |
| 107 | labelKey: { | 111 | labelKey: { |
| 108 | type: String, | 112 | type: String, |
| @@ -193,7 +197,6 @@ export default { | @@ -193,7 +197,6 @@ export default { | ||
| 193 | 'row-click': this.onTableRowClick, | 197 | 'row-click': this.onTableRowClick, |
| 194 | }, | 198 | }, |
| 195 | props: { | 199 | props: { |
| 196 | - size: 'small', | ||
| 197 | 'highlight-current-row': true, | 200 | 'highlight-current-row': true, |
| 198 | ...(get(this.schema, 'table.props') || {}), | 201 | ...(get(this.schema, 'table.props') || {}), |
| 199 | }, | 202 | }, |
packages/select/index.vue
| @@ -24,7 +24,7 @@ | @@ -24,7 +24,7 @@ | ||
| 24 | <slot name="empty" slot="empty"></slot> | 24 | <slot name="empty" slot="empty"></slot> |
| 25 | <template slot="prefix"> | 25 | <template slot="prefix"> |
| 26 | <slot name="prefix"> | 26 | <slot name="prefix"> |
| 27 | - <i v-if="selectFilterable && !multiple" class="el-input__icon el-icon-search"></i> | 27 | + <i v-if="selectFilterable && !multiple && prefixIcon" :class="`el-input__icon ${prefixIcon}`"></i> |
| 28 | </slot> | 28 | </slot> |
| 29 | </template> | 29 | </template> |
| 30 | </el-select> | 30 | </el-select> |
| @@ -63,6 +63,10 @@ export default { | @@ -63,6 +63,10 @@ export default { | ||
| 63 | type: String, | 63 | type: String, |
| 64 | default: 'value', | 64 | default: 'value', |
| 65 | }, | 65 | }, |
| 66 | + prefixIcon: { | ||
| 67 | + type: String, | ||
| 68 | + default: 'el-icon-search', | ||
| 69 | + }, | ||
| 66 | size: String, | 70 | size: String, |
| 67 | multiple: Boolean, | 71 | multiple: Boolean, |
| 68 | sequence: Boolean, | 72 | sequence: Boolean, |
packages/table/editable.vue
| @@ -42,8 +42,8 @@ | @@ -42,8 +42,8 @@ | ||
| 42 | <slot :name="`header-${item.prop}`" slot="header"></slot> | 42 | <slot :name="`header-${item.prop}`" slot="header"></slot> |
| 43 | <template #default="{ row, column, $index }"> | 43 | <template #default="{ row, column, $index }"> |
| 44 | <cell-editor | 44 | <cell-editor |
| 45 | - :disabled="editall || disabled || item.editable === false" | ||
| 46 | - :editable="editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))" | 45 | + :disabled="item.editalways || editall || disabled || item.editable === false" |
| 46 | + :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))" | ||
| 47 | :component="item.component" | 47 | :component="item.component" |
| 48 | :value="row[column.property]" | 48 | :value="row[column.property]" |
| 49 | @input="value => onCellInput(value, row, column, $index)" | 49 | @input="value => onCellInput(value, row, column, $index)" |