diff --git a/examples/views/select/Select.vue b/examples/views/select/Select.vue
index 10cd2e428..d2ac45a97 100644
--- a/examples/views/select/Select.vue
+++ b/examples/views/select/Select.vue
@@ -5,6 +5,24 @@
+
+
+ 按钮
+ 按钮
+ 按钮
+ 按钮
+
+
+
+
+
+ 按钮
+ 按钮
+ 按钮
+ 按钮
+
+
+
diff --git a/packages/pulldown/src/pulldown.js b/packages/pulldown/src/pulldown.js
index ed698d218..498c2aa79 100644
--- a/packages/pulldown/src/pulldown.js
+++ b/packages/pulldown/src/pulldown.js
@@ -56,9 +56,11 @@ export default {
GlobalEvent.off(this, 'blur')
},
render (h) {
- const { $scopedSlots, inited, className, popupClassName, vSize, destroyOnClose, transfer, isActivated, disabled, animatVisible, visiblePanel, panelStyle, panelPlacement } = this
+ const { _e, $scopedSlots, inited, className, popupClassName, vSize, destroyOnClose, transfer, isActivated, disabled, animatVisible, visiblePanel, panelStyle, panelPlacement } = this
const defaultSlot = $scopedSlots.default
- const downSlot = $scopedSlots.dropdown
+ const headerSlot = $scopedSlots.header
+ const footerSlot = $scopedSlots.footer
+ const dropdownSlot = $scopedSlots.dropdown
return h('div', {
class: ['vxe-pulldown', className ? (XEUtils.isFunction(className) ? className({ $pulldown: this }) : className) : '', {
[`size--${vSize}`]: vSize,
@@ -83,11 +85,21 @@ export default {
placement: panelPlacement
},
style: panelStyle
- }, downSlot ? [
+ }, [
h('div', {
- class: 'vxe-pulldown--wrapper'
- }, !inited || (destroyOnClose && !visiblePanel && !animatVisible) ? [] : downSlot.call(this, { $pulldown: this }, h))
- ] : [])
+ class: 'vxe-pulldown--panel-wrapper'
+ }, !inited || (destroyOnClose && !visiblePanel && !animatVisible) ? [] : [
+ headerSlot ? h('div', {
+ class: 'vxe-pulldown--panel-header'
+ }, headerSlot.call(this, { $pulldown: this })) : _e(),
+ h('div', {
+ class: 'vxe-pulldown--panel-body'
+ }, dropdownSlot ? dropdownSlot.call(this, { $pulldown: this }, h) : []),
+ footerSlot ? h('div', {
+ class: 'vxe-pulldown--panel-footer'
+ }, footerSlot.call(this, { $pulldown: this })) : _e()
+ ])
+ ])
])
},
methods: {
diff --git a/packages/select/src/select.js b/packages/select/src/select.js
index 362370d61..55ed8150e 100644
--- a/packages/select/src/select.js
+++ b/packages/select/src/select.js
@@ -139,8 +139,9 @@ function checkOptionDisabled (_vm, isSelected, option, group) {
}
export function renderOption (h, _vm, list, group) {
- const { isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm
+ const { $scopedSlots, isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm
const { useKey } = optionOpts
+ const optionSlot = $scopedSlots.option
return list.map((option, cIndex) => {
const { slots } = option
const optionValue = option[valueField]
@@ -149,6 +150,7 @@ export function renderOption (h, _vm, list, group) {
const isDisabled = checkOptionDisabled(_vm, isSelected, option, group)
const optid = getOptid(_vm, option)
const defaultSlot = slots ? slots.default : null
+ const optParams = { option, group: null, $select: _vm }
return isVisible ? h('div', {
key: useKey || optionKey ? optid : cIndex,
class: ['vxe-select-option', option.className, {
@@ -172,18 +174,20 @@ export function renderOption (h, _vm, list, group) {
}
}
}
- }, defaultSlot ? _vm.callSlot(defaultSlot, { option, $select: _vm }, h) : UtilTools.formatText(getFuncText(option[labelField]))) : null
+ }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : UtilTools.formatText(getFuncText(option[labelField])))) : null
})
}
export function renderOptgroup (h, _vm) {
- const { optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm
+ const { $scopedSlots, optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm
const { useKey } = optionOpts
+ const optionSlot = $scopedSlots.option
return visibleGroupList.map((group, gIndex) => {
const { slots } = group
const optid = getOptid(_vm, group)
const isGroupDisabled = group.disabled
const defaultSlot = slots ? slots.default : null
+ const optParams = { option: group, group, $select: _vm }
return h('div', {
key: useKey || optionKey ? optid : gIndex,
class: ['vxe-optgroup', group.className, {
@@ -195,7 +199,7 @@ export function renderOptgroup (h, _vm) {
}, [
h('div', {
class: 'vxe-optgroup--title'
- }, defaultSlot ? _vm.callSlot(defaultSlot, { option: group, $select: _vm }, h) : getFuncText(group[groupLabelField])),
+ }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : getFuncText(group[groupLabelField]))),
h('div', {
class: 'vxe-optgroup--wrapper'
}, renderOption(h, _vm, group[groupOptionsField], group))
@@ -413,7 +417,10 @@ export default {
},
render (h) {
const { _e, $scopedSlots, vSize, className, popupClassName, inited, isActivated, loading, disabled, visiblePanel, filterable } = this
+ const defaultSlot = $scopedSlots.default
const prefixSlot = $scopedSlots.prefix
+ const headerSlot = $scopedSlots.header
+ const footerSlot = $scopedSlots.footer
return h('div', {
class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: this }) : className) : '', {
[`size--${vSize}`]: vSize,
@@ -427,7 +434,7 @@ export default {
h('div', {
class: 'vxe-select-slots',
ref: 'hideOption'
- }, this.$slots.default),
+ }, defaultSlot ? defaultSlot.call(this, {}) : []),
h('vxe-input', {
ref: 'input',
props: {
@@ -448,7 +455,7 @@ export default {
'suffix-click': this.togglePanelEvent
},
scopedSlots: prefixSlot ? {
- prefix: () => prefixSlot({})
+ prefix: () => prefixSlot.call(this, {})
} : {}
}),
h('div', {
@@ -465,11 +472,11 @@ export default {
style: this.panelStyle
}, inited ? [
filterable ? h('div', {
- class: 'vxe-select-filter--wrapper'
+ class: 'vxe-select--panel-search'
}, [
h('vxe-input', {
ref: 'inpSearch',
- class: 'vxe-select-filter--input',
+ class: 'vxe-select-search--input',
props: {
value: this.searchValue,
type: 'text',
@@ -487,10 +494,24 @@ export default {
})
]) : _e(),
h('div', {
- ref: 'optWrapper',
- class: 'vxe-select-option--wrapper'
- }, renderOpts(h, this))
- ] : null)
+ class: 'vxe-select--panel-wrapper'
+ }, [
+ headerSlot ? h('div', {
+ class: 'vxe-select--panel-header'
+ }, headerSlot.call(this, {})) : _e(),
+ h('div', {
+ class: 'vxe-select--panel-body'
+ }, [
+ h('div', {
+ ref: 'optWrapper',
+ class: 'vxe-select-option--wrapper'
+ }, renderOpts(h, this))
+ ]),
+ footerSlot ? h('div', {
+ class: 'vxe-select--panel-footer'
+ }, footerSlot.call(this, {})) : _e()
+ ])
+ ] : [])
])
},
methods: {
diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js
index ecee2ee9c..db579e0bc 100644
--- a/packages/v-x-e-table/src/conf.js
+++ b/packages/v-x-e-table/src/conf.js
@@ -12,7 +12,7 @@ export default {
showHeader: true,
animat: true,
delayHover: 250,
- autoResize: false,
+ autoResize: true,
minHeight: 144,
// keepSource: false,
// showOverflow: null,
diff --git a/styles/pulldown.scss b/styles/pulldown.scss
index 8750b371b..f67d4e440 100644
--- a/styles/pulldown.scss
+++ b/styles/pulldown.scss
@@ -38,8 +38,8 @@
transform: scaleY(1);
}
}
-.vxe-pulldown--wrapper {
- background-color: $vxe-pulldown-panel-background-color;
+.vxe-pulldown--panel-wrapper {
+ background-color: var(--vxe-pulldown-panel-background-color);
}
.vxe-pulldown,
diff --git a/styles/select.scss b/styles/select.scss
index 76e304dae..5615ed38c 100644
--- a/styles/select.scss
+++ b/styles/select.scss
@@ -79,23 +79,40 @@
}
}
-.vxe-select-filter--wrapper {
+.vxe-select--panel-search {
display: block;
- .vxe-select-filter--input {
+ .vxe-select-search--input {
width: 100%;
}
}
+.vxe-select--panel-wrapper {
+ position: relative;
+ border-radius: $vxe-border-radius;
+ border: 1px solid $vxe-table-popup-border-color;
+ box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+ background-color: $vxe-select-panel-background-color;
+}
+
+.vxe-select--panel-header {
+ border-bottom: 1px solid $vxe-table-popup-border-color;
+}
+
+.vxe-select--panel-footer {
+ border-top: 1px solid $vxe-table-popup-border-color;
+}
+
+.vxe-select--panel-header,
+.vxe-select--panel-footer {
+ padding: 4px 0;
+}
+
.vxe-select-option--wrapper {
position: relative;
overflow-x: hidden;
overflow-y: auto;
padding: 4px 0;
max-height: 200px;
- border-radius: $vxe-border-radius;
- border: 1px solid $vxe-table-popup-border-color;
- box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
- background-color: $vxe-select-panel-background-color;
}
.vxe-optgroup {