lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

fix scss

Browse Source
This commit is contained in:
xuliangzhan
2023-07-26 12:09:37 +08:00
parent c007f526b5
commit 6a8ffc9f2e
7 changed files with 636 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/grid/src/grid.ts
View File

@@ -201,6 +201,7 @@ export default defineComponent({
const { isZMax, tableLoading, tablePage, tableData } = reactData
const tableExtendProps = computeTableExtendProps.value
const proxyOpts = computeProxyOpts.value
const pagerOpts = computePagerOpts.value
const tableProps = Object.assign({}, tableExtendProps)
if (isZMax) {
if (tableExtendProps.maxHeight) {
@@ -209,11 +210,11 @@ export default defineComponent({
tableProps.height = 'auto'
}
}
if (proxyConfig) {
if (proxyConfig && isEnableConf(proxyOpts)) {
tableProps.loading = loading || tableLoading
tableProps.data = tableData
tableProps.rowClassName = handleRowClassName
if (proxyOpts.seq && isEnableConf(pagerConfig)) {
if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
tableProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize })
}
}
@@ -224,13 +225,16 @@ export default defineComponent({
})
const initToolbar = () => {
nextTick(() => {
const $xetable = refTable.value
const $xetoolbar = refToolbar.value
if ($xetable && $xetoolbar) {
$xetable.connect($xetoolbar)
}
})
const toolbarOpts = computeToolbarOpts.value
if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
nextTick(() => {
const $xetable = refTable.value
const $xetoolbar = refToolbar.value
if ($xetable && $xetoolbar) {
$xetable.connect($xetoolbar)
}
})
}
}
const initPages = () => {
@@ -238,7 +242,7 @@ export default defineComponent({
const { pagerConfig } = props
const pagerOpts = computePagerOpts.value
const { currentPage, pageSize } = pagerOpts
if (pagerConfig) {
if (pagerConfig && isEnableConf(pagerOpts)) {
if (currentPage) {
tablePage.currentPage = currentPage
}
@@ -323,10 +327,11 @@ export default defineComponent({
const { proxyConfig } = props
const { tablePage } = reactData
const { currentPage, pageSize } = params
const proxyOpts = computeProxyOpts.value
tablePage.currentPage = currentPage
tablePage.pageSize = pageSize
gridMethods.dispatchEvent('page-change', params)
if (proxyConfig) {
if (proxyConfig && isEnableConf(proxyOpts)) {
gridMethods.commitProxy('query').then((rest) => {
gridMethods.dispatchEvent('proxy-query', rest, params.$event)
})
@@ -337,11 +342,12 @@ export default defineComponent({
const $xetable = refTable.value
const { proxyConfig } = props
const { computeSortOpts } = $xetable.getComputeMaps()
const proxyOpts = computeProxyOpts.value
const sortOpts = computeSortOpts.value
// 如果是服务端排序
if (sortOpts.remote) {
reactData.sortData = params.sortList
if (proxyConfig) {
if (proxyConfig && isEnableConf(proxyOpts)) {
reactData.tablePage.currentPage = 1
gridMethods.commitProxy('query').then((rest) => {
gridMethods.dispatchEvent('proxy-query', rest, params.$event)
@@ -355,11 +361,12 @@ export default defineComponent({
const $xetable = refTable.value
const { proxyConfig } = props
const { computeFilterOpts } = $xetable.getComputeMaps()
const proxyOpts = computeProxyOpts.value
const filterOpts = computeFilterOpts.value
// 如果是服务端过滤
if (filterOpts.remote) {
reactData.filterData = params.filterList
if (proxyConfig) {
if (proxyConfig && isEnableConf(proxyOpts)) {
reactData.tablePage.currentPage = 1
gridMethods.commitProxy('query').then((rest) => {
gridMethods.dispatchEvent('proxy-query', rest, params.$event)
@@ -371,7 +378,8 @@ export default defineComponent({
const submitFormEvent: VxeFormEvents.Submit = (params) => {
const { proxyConfig } = props
if (proxyConfig) {
const proxyOpts = computeProxyOpts.value
if (proxyConfig && isEnableConf(proxyOpts)) {
gridMethods.commitProxy('reload').then((rest) => {
gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event)
})
@@ -381,7 +389,8 @@ export default defineComponent({
const resetFormEvent: VxeFormEvents.Reset = (params) => {
const { proxyConfig } = props
if (proxyConfig) {
const proxyOpts = computeProxyOpts.value
if (proxyConfig && isEnableConf(proxyOpts)) {
gridMethods.commitProxy('reload').then((rest) => {
gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event)
})
@@ -437,7 +446,7 @@ export default defineComponent({
const proxyOpts = computeProxyOpts.value
const formOpts = computeFormOpts.value
const restVNs = []
if (isEnableConf(formConfig) || slots.form) {
if ((formConfig && isEnableConf(formOpts)) || slots.form) {
let slotVNs = []
if (slots.form) {
slotVNs = slots.form({ $grid: $xegrid })
@@ -467,7 +476,7 @@ export default defineComponent({
h(resolveComponent('vxe-form') as ComponentOptions, {
ref: refForm,
...Object.assign({}, formOpts, {
data: proxyConfig && proxyOpts.form ? formData : formOpts.data
data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
}),
onSubmit: submitFormEvent,
onReset: resetFormEvent,
@@ -494,7 +503,7 @@ export default defineComponent({
const { toolbarConfig } = props
const toolbarOpts = computeToolbarOpts.value
const restVNs = []
if (isEnableConf(toolbarConfig) || slots.toolbar) {
if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
let slotVNs = []
if (slots.toolbar) {
slotVNs = slots.toolbar({ $grid: $xegrid })
@@ -561,7 +570,7 @@ export default defineComponent({
const tableOns = Object.assign({}, tableCompEvents)
const emptySlot = slots.empty
const loadingSlot = slots.loading
if (proxyConfig) {
if (proxyConfig && isEnableConf(proxyOpts)) {
if (proxyOpts.sort) {
tableOns.onSortChange = sortChangeEvent
}
@@ -607,10 +616,11 @@ export default defineComponent({
* 渲染分页
*/
const renderPagers = () => {
const { pagerConfig } = props
const { proxyConfig, pagerConfig } = props
const proxyOpts = computeProxyOpts.value
const pagerOpts = computePagerOpts.value
const restVNs = []
if (isEnableConf(pagerConfig) || slots.pager) {
if ((pagerConfig && isEnableConf(pagerOpts)) || slots.pager) {
let slotVNs = []
if (slots.pager) {
slotVNs = slots.pager({ $grid: $xegrid })
@@ -633,7 +643,7 @@ export default defineComponent({
h(resolveComponent('vxe-pager') as ComponentOptions, {
ref: refPager,
...pagerOpts,
...(props.proxyConfig ? reactData.tablePage : {}),
...(proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {}),
onPageChange: pageChangeEvent
}, pagerSlots)
)
@@ -653,8 +663,8 @@ export default defineComponent({
const { proxyInited } = reactData
const proxyOpts = computeProxyOpts.value
const formOpts = computeFormOpts.value
if (proxyConfig) {
if (isEnableConf(formConfig) && proxyOpts.form && formOpts.items) {
if (proxyConfig && isEnableConf(proxyOpts)) {
if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
const formData: any = {}
formOpts.items.forEach(item => {
const { field, itemRender } = item
@@ -697,6 +707,7 @@ export default defineComponent({
const { tablePage, formData } = reactData
const isMsg = computeIsMsg.value
const proxyOpts = computeProxyOpts.value
const pagerOpts = computePagerOpts.value
const toolbarOpts = computeToolbarOpts.value
const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {}, props: proxyProps = {} } = proxyOpts
const $xetable = refTable.value
@@ -704,7 +715,7 @@ export default defineComponent({
let code: string | null = null
if (XEUtils.isString(proxyTarget)) {
const { buttons } = toolbarOpts
const matchObj = toolbarConfig && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null
const matchObj = toolbarConfig && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null
button = matchObj ? matchObj.item : null
code = proxyTarget
} else {
@@ -750,7 +761,7 @@ export default defineComponent({
if (isInited || isReload) {
tablePage.currentPage = 1
}
if (isEnableConf(pagerConfig)) {
if (isEnableConf(pagerOpts)) {
pageParams = { ...tablePage }
}
}
@@ -802,7 +813,7 @@ export default defineComponent({
.then(rest => {
reactData.tableLoading = false
if (rest) {
if (isEnableConf(pagerConfig)) {
if (pagerConfig && isEnableConf(pagerOpts)) {
const total = XEUtils.get(rest, proxyProps.total || 'page.total') || 0
tablePage.total = XEUtils.toNumber(total)
reactData.tableData = XEUtils.get(rest, proxyProps.result || 'result') || []
@@ -1011,7 +1022,7 @@ export default defineComponent({
const { formConfig } = props
const { items } = formOpts
const itemList: VxeFormItemProps[] = []
XEUtils.eachTree(isEnableConf(formConfig) && items ? items : [], item => {
XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
itemList.push(item)
}, { children: 'children' })
return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex]
@@ -1147,10 +1158,8 @@ export default defineComponent({
nextTick(() => $xegrid.loadColumn(props.columns || []))
})
watch(() => props.toolbarConfig, (value) => {
if (value) {
initToolbar()
}
watch(() => props.toolbarConfig, () => {
initToolbar()
})
watch(() => props.pagerConfig, () => {
@@ -1186,7 +1195,7 @@ export default defineComponent({
const { data, columns, proxyConfig } = props
const proxyOpts = computeProxyOpts.value
const formOpts = computeFormOpts.value
if (proxyConfig && (data || (proxyOpts.form && formOpts.data))) {
if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
}
if (columns && columns.length) {

30
styles/all.scss Normal file
View File

@@ -0,0 +1,30 @@
@import './variable.scss';
@import './css-variable.scss';
@import './icon.scss';
@import './filter.scss';
@import './menu.scss';
@import './export.scss';
@import './table.scss';
@import './grid.scss';
@import './toolbar.scss';
@import './pager.scss';
@import './checkbox.scss';
@import './checkbox-group.scss';
@import './radio.scss';
@import './radio-group.scss';
@import './radio-button.scss';
@import './input.scss';
@import './textarea.scss';
@import './button.scss';
@import './modal.scss';
@import './tooltip.scss';
@import './form.scss';
@import './form-item.scss';
@import './form-gather.scss';
@import './select.scss';
@import './optgroup.scss';
@import './option.scss';
@import './switch.scss';
@import './list.scss';
@import './pulldown.scss';

272
styles/css-variable.scss Normal file
View File

@@ -0,0 +1,272 @@
/**Variable**/
:root {
/*font*/
--vxe-font-family: #{$vxe-font-family};
--vxe-font-size: #{$vxe-font-size};
--vxe-font-size-medium: #{$vxe-font-size-medium};
--vxe-font-size-small: #{$vxe-font-size-small};
--vxe-font-size-mini: #{$vxe-font-size-mini};
/*size*/
--vxe-border-radius: #{$vxe-border-radius};
/*icon*/
--vxe-icon-font-family: #{$vxe-icon-font-family};
--vxe-icon-background-color: #{$vxe-icon-background-color};
/*color*/
--vxe-font-color: #{$vxe-font-color};
--vxe-primary-color: #{$vxe-primary-color};
--vxe-success-color: #{$vxe-success-color};
--vxe-info-color: #{$vxe-info-color};
--vxe-warning-color: #{$vxe-warning-color};
--vxe-danger-color: #{$vxe-danger-color};
--vxe-font-lighten-color: #{$vxe-font-lighten-color};
--vxe-primary-lighten-color: #{$vxe-primary-lighten-color};
--vxe-success-lighten-color: #{$vxe-success-lighten-color};
--vxe-info-lighten-color: #{$vxe-info-lighten-color};
--vxe-warning-lighten-color: #{$vxe-warning-lighten-color};
--vxe-danger-lighten-color: #{$vxe-danger-lighten-color};
--vxe-font-darken-color: #{$vxe-font-darken-color};
--vxe-primary-darken-color: #{$vxe-primary-darken-color};
--vxe-success-darken-color: #{$vxe-success-darken-color};
--vxe-info-darken-color: #{$vxe-info-darken-color};
--vxe-warning-darken-color: #{$vxe-warning-darken-color};
--vxe-danger-darken-color: #{$vxe-danger-darken-color};
--vxe-font-disabled-color: #{$vxe-font-disabled-color};
--vxe-primary-disabled-color: #{$vxe-primary-disabled-color};
--vxe-success-disabled-color: #{$vxe-success-disabled-color};
--vxe-info-disabled-color: #{$vxe-info-disabled-color};
--vxe-warning-disabled-color: #{$vxe-warning-disabled-color};
--vxe-danger-disabled-color: #{$vxe-danger-disabled-color};
/*input/radio/checkbox*/
--vxe-input-border-color: #{$vxe-input-border-color};
--vxe-input-disabled-color: #{$vxe-input-disabled-color};
--vxe-input-disabled-background-color: #{$vxe-input-disabled-background-color};
--vxe-input-placeholder-color: #{$vxe-input-placeholder-color};
/*popup*/
--vxe-table-popup-border-color: #{$vxe-table-popup-border-color};
/*table*/
--vxe-table-header-font-color: #{$vxe-table-header-font-color};
--vxe-table-footer-font-color: #{$vxe-table-footer-font-color};
--vxe-table-border-radius: #{$vxe-table-border-radius};
--vxe-table-border-width: #{$vxe-table-border-width};
--vxe-table-border-color: #{$vxe-table-border-color};
--vxe-table-resizable-line-color: #{$vxe-table-resizable-line-color};
--vxe-table-resizable-drag-line-color: #{$vxe-table-resizable-drag-line-color};
--vxe-table-header-background-color: #{$vxe-table-header-background-color};
--vxe-table-body-background-color: #{$vxe-table-body-background-color};
--vxe-table-footer-background-color: #{$vxe-table-footer-background-color};
--vxe-table-tree-node-line-color: #{$vxe-table-tree-node-line-color};
--vxe-table-tree-node-line-style: #{$vxe-table-tree-node-line-style};
--vxe-table-header-font-weight: #{$vxe-table-header-font-weight};
--vxe-table-row-height-default: #{$vxe-table-row-height-default};
--vxe-table-row-height-medium: #{$vxe-table-row-height-medium};
--vxe-table-row-height-small: #{$vxe-table-row-height-small};
--vxe-table-row-height-mini: #{$vxe-table-row-height-mini};
--vxe-table-row-line-height: #{$vxe-table-row-line-height};
--vxe-table-row-hover-background-color: #{$vxe-table-row-hover-background-color};
--vxe-table-row-striped-background-color: #{$vxe-table-row-striped-background-color};
--vxe-table-row-hover-striped-background-color: #{$vxe-table-row-hover-striped-background-color};
--vxe-table-row-radio-checked-background-color: #{$vxe-table-row-radio-checked-background-color};
--vxe-table-row-hover-radio-checked-background-color: #{$vxe-table-row-hover-radio-checked-background-color};
--vxe-table-row-checkbox-checked-background-color: #{$vxe-table-row-checkbox-checked-background-color};
--vxe-table-row-hover-checkbox-checked-background-color: #{$vxe-table-row-hover-checkbox-checked-background-color};
--vxe-table-row-current-background-color: #{$vxe-table-row-current-background-color};
--vxe-table-row-hover-current-background-color: #{$vxe-table-row-hover-current-background-color};
--vxe-table-column-padding-default: #{$vxe-table-column-padding-default};
--vxe-table-column-padding-medium: #{$vxe-table-column-padding-medium};
--vxe-table-column-padding-small: #{$vxe-table-column-padding-small};
--vxe-table-column-padding-mini: #{$vxe-table-column-padding-mini};
--vxe-table-column-hover-background-color: #{$vxe-table-column-hover-background-color};
--vxe-table-column-current-background-color: #{$vxe-table-column-current-background-color};
--vxe-table-column-icon-border-color: #{$vxe-table-column-icon-border-color};
--vxe-table-column-icon-border-hover-color: #{$vxe-table-column-icon-border-hover-color};
--vxe-table-cell-placeholder-color: #{$vxe-table-cell-placeholder-color};
--vxe-table-cell-padding-left: #{$vxe-table-cell-padding-left};
--vxe-table-cell-padding-right: #{$vxe-table-cell-padding-right};
--vxe-table-cell-input-height-default: #{$vxe-table-cell-input-height-default};
--vxe-table-cell-input-height-medium: #{$vxe-table-cell-input-height-medium};
--vxe-table-cell-input-height-small: #{$vxe-table-cell-input-height-small};
--vxe-table-cell-input-height-mini: #{$vxe-table-cell-input-height-mini};
--vxe-table-cell-dirty-width: #{$vxe-table-cell-dirty-width};
--vxe-table-cell-dirty-update-color: #{$vxe-table-cell-dirty-update-color};
--vxe-table-cell-dirty-insert-color: #{$vxe-table-cell-dirty-insert-color};
--vxe-table-cell-area-border-color: #{$vxe-table-cell-area-border-color};
--vxe-table-cell-area-border-width: #{$vxe-table-cell-area-border-width};
--vxe-table-cell-main-area-extension-border-color: #{$vxe-table-cell-main-area-extension-border-color};
--vxe-table-cell-main-area-extension-background-color: #{$vxe-table-cell-main-area-extension-background-color};
--vxe-table-cell-extend-area-border-width: #{$vxe-table-cell-extend-area-border-width};
--vxe-table-cell-copy-area-border-width: #{$vxe-table-cell-copy-area-border-width};
--vxe-table-cell-active-area-border-width: #{$vxe-table-cell-active-area-border-width};
--vxe-table-cell-copy-area-border-color: #{$vxe-table-cell-copy-area-border-color};
--vxe-table-cell-extend-area-border-color: #{$vxe-table-cell-extend-area-border-color};
--vxe-table-cell-active-area-border-color: #{$vxe-table-cell-active-area-border-color};
--vxe-table-cell-area-background-color: #{$vxe-table-cell-area-background-color};
--vxe-table-checkbox-range-border-width: #{$vxe-table-checkbox-range-border-width};
--vxe-table-checkbox-range-border-color: #{$vxe-table-checkbox-range-border-color};
--vxe-table-checkbox-range-background-color: #{$vxe-table-checkbox-range-background-color};
--vxe-table-fixed-left-scrolling-box-shadow: #{$vxe-table-fixed-left-scrolling-box-shadow};
--vxe-table-fixed-right-scrolling-box-shadow: #{$vxe-table-fixed-right-scrolling-box-shadow};
/*filter*/
--vxe-table-filter-panel-background-color: #{$vxe-table-filter-panel-background-color};
/*menu*/
--vxe-table-menu-item-width: #{$vxe-table-menu-item-width};
--vxe-table-menu-background-color: #{$vxe-table-menu-background-color};
/*loading*/
--vxe-loading-color: #{$vxe-loading-color};
--vxe-loading-background-color: #{$vxe-loading-background-color};
--vxe-loading-z-index: #{$vxe-loading-z-index};
/*validate*/
--vxe-table-validate-error-color: #{$vxe-table-validate-error-color};
--vxe-table-validate-error-background-color: #{$vxe-table-validate-error-background-color};
/*grid*/
--vxe-grid-maximize-background-color: #{$vxe-grid-maximize-background-color};
/*toolbar*/
--vxe-toolbar-background-color: #{$vxe-toolbar-background-color};
--vxe-toolbar-custom-active-background-color: #{$vxe-toolbar-custom-active-background-color};
--vxe-toolbar-panel-background-color: #{$vxe-toolbar-panel-background-color};
/*tooltip*/
--vxe-tooltip-dark-color: #{$vxe-tooltip-dark-color};
--vxe-tooltip-dark-background-color: #{$vxe-tooltip-dark-background-color};
--vxe-tooltip-light-background-color: #{$vxe-tooltip-light-background-color};
/*pager*/
--vxe-pager-background-color: #{$vxe-pager-background-color};
--vxe-pager-perfect-background-color: #{$vxe-pager-perfect-background-color};
--vxe-pager-perfect-button-background-color: #{$vxe-pager-perfect-button-background-color};
/*modal*/
--vxe-modal-header-background-color: #{$vxe-modal-header-background-color};
--vxe-modal-body-background-color: #{$vxe-modal-body-background-color};
--vxe-modal-border-color: #{$vxe-modal-border-color};
/*checkbox*/
--vxe-checkbox-font-size-default: #{$vxe-checkbox-font-size-default};
--vxe-checkbox-font-size-medium: #{$vxe-checkbox-font-size-medium};
--vxe-checkbox-font-size-small: #{$vxe-checkbox-font-size-small};
--vxe-checkbox-font-size-mini: #{$vxe-checkbox-font-size-mini};
--vxe-checkbox-checked-width: #{$vxe-checkbox-checked-width};
--vxe-checkbox-checked-height: #{$vxe-checkbox-checked-height};
--vxe-checkbox-indeterminate-width: #{$vxe-checkbox-indeterminate-width};
--vxe-checkbox-indeterminate-height: #{$vxe-checkbox-indeterminate-height};
--vxe-checkbox-border-width: #{$vxe-checkbox-border-width};
--vxe-checkbox-border-radius: #{$vxe-checkbox-border-radius};
--vxe-checkbox-icon-background-color: #{$vxe-checkbox-icon-background-color};
--vxe-checkbox-checked-icon-border-color: #{$vxe-checkbox-checked-icon-border-color};
--vxe-checkbox-indeterminate-icon-background-color: #{$vxe-checkbox-indeterminate-icon-background-color};
/*radio*/
--vxe-radio-font-size-default: #{$vxe-radio-font-size-default};
--vxe-radio-font-size-medium: #{$vxe-radio-font-size-medium};
--vxe-radio-font-size-small: #{$vxe-radio-font-size-small};
--vxe-radio-font-size-mini: #{$vxe-radio-font-size-mini};
--vxe-radio-border-width: #{$vxe-radio-border-width};
--vxe-radio-icon-background-color: #{$vxe-radio-icon-background-color};
--vxe-radio-checked-icon-background-color: #{$vxe-radio-checked-icon-background-color};
--vxe-radio-indeterminate-icon-background-color: #{$vxe-radio-indeterminate-icon-background-color};
--vxe-radio-button-default-background-color: #{$vxe-radio-button-default-background-color};
/*button*/
--vxe-button-max-width: #{$vxe-button-max-width};
--vxe-button-default-background-color: #{$vxe-button-default-background-color};
--vxe-button-dropdown-panel-background-color: #{$vxe-button-dropdown-panel-background-color};
--vxe-button-height-default: #{$vxe-button-height-default};
--vxe-button-height-medium: #{$vxe-button-height-medium};
--vxe-button-height-small: #{$vxe-button-height-small};
--vxe-button-height-mini: #{$vxe-button-height-mini};
--vxe-button-round-border-radius-default: #{$vxe-button-round-border-radius-default};
--vxe-button-round-border-radius-medium: #{$vxe-button-round-border-radius-medium};
--vxe-button-round-border-radius-small: #{$vxe-button-round-border-radius-small};
--vxe-button-round-border-radius-mini: #{$vxe-button-round-border-radius-mini};
/*input*/
--vxe-input-background-color: #{$vxe-input-background-color};
--vxe-input-panel-background-color: #{$vxe-input-panel-background-color};
--vxe-input-number-disabled-color: #{$vxe-input-number-disabled-color};
--vxe-input-date-festival-color: #{$vxe-input-date-festival-color};
--vxe-input-date-festival-important-color: #{$vxe-input-date-festival-important-color};
--vxe-input-date-notice-background-color: #{$vxe-input-date-notice-background-color};
--vxe-input-date-picker-hover-background-color: #{$vxe-input-date-picker-hover-background-color};
--vxe-input-date-picker-selected-color: #{$vxe-input-date-picker-selected-color};
--vxe-input-date-time-confirm-button-color: #{$vxe-input-date-time-confirm-button-color};
--vxe-input-date-picker-festival-selected-color: #{$vxe-input-date-picker-festival-selected-color};
--vxe-input-date-picker-notice-selected-background-color: #{$vxe-input-date-picker-notice-selected-background-color};
--vxe-input-date-extra-color: #{$vxe-input-date-extra-color};
--vxe-input-date-extra-important-color: #{$vxe-input-date-extra-important-color};
--vxe-input-date-title-height-default: #{$vxe-input-date-title-height-default};
--vxe-input-date-title-height-medium: #{$vxe-input-date-title-height-medium};
--vxe-input-date-title-height-small: #{$vxe-input-date-title-height-small};
--vxe-input-date-title-height-mini: #{$vxe-input-date-title-height-mini};
--vxe-input-date-time-week-row-height-default: #{$vxe-input-date-time-week-row-height-default};
--vxe-input-date-time-week-row-height-medium: #{$vxe-input-date-time-week-row-height-medium};
--vxe-input-date-time-week-row-height-small: #{$vxe-input-date-time-week-row-height-small};
--vxe-input-date-time-week-row-height-mini: #{$vxe-input-date-time-week-row-height-mini};
--vxe-input-date-month-year-row-height-default: #{$vxe-input-date-month-year-row-height-default};
--vxe-input-date-month-year-row-height-medium: #{$vxe-input-date-month-year-row-height-medium};
--vxe-input-date-month-year-row-height-small: #{$vxe-input-date-month-year-row-height-small};
--vxe-input-date-month-year-row-height-mini: #{$vxe-input-date-month-year-row-height-mini};
--vxe-input-date-quarter-row-height-default: #{$vxe-input-date-quarter-row-height-default};
--vxe-input-date-quarter-row-height-medium: #{$vxe-input-date-quarter-row-height-medium};
--vxe-input-date-quarter-row-height-small: #{$vxe-input-date-quarter-row-height-small};
--vxe-input-date-quarter-row-height-mini: #{$vxe-input-date-quarter-row-height-mini};
--vxe-input-height-default: #{$vxe-input-height-default};
--vxe-input-height-medium: #{$vxe-input-height-medium};
--vxe-input-height-small: #{$vxe-input-height-small};
--vxe-input-height-mini: #{$vxe-input-height-mini};
/*textarea*/
--vxe-textarea-line-height: #{$vxe-textarea-line-height};
--vxe-textarea-background-color: #{$vxe-textarea-background-color};
--vxe-textarea-count-color: #{$vxe-textarea-count-color};
--vxe-textarea-count-background-color: #{$vxe-textarea-count-background-color};
--vxe-textarea-count-error-color: #{$vxe-textarea-count-error-color};
/*form*/
--vxe-form-item-min-height-default: #{$vxe-form-item-min-height-default};
--vxe-form-item-min-height-medium: #{$vxe-form-item-min-height-medium};
--vxe-form-item-min-height-small: #{$vxe-form-item-min-height-small};
--vxe-form-item-min-height-mini: #{$vxe-form-item-min-height-mini};
--vxe-form-background-color: #{$vxe-form-background-color};
--vxe-form-validate-error-color: #{$vxe-form-validate-error-color};
--vxe-form-validate-error-background-color: #{$vxe-form-validate-error-background-color};
/*select*/
--vxe-select-option-height-default: #{$vxe-select-option-height-default};
--vxe-select-option-height-medium: #{$vxe-select-option-height-medium};
--vxe-select-option-height-small: #{$vxe-select-option-height-small};
--vxe-select-option-height-mini: #{$vxe-select-option-height-mini};
--vxe-select-option-hover-background-color: #{$vxe-select-option-hover-background-color};
--vxe-select-panel-background-color: #{$vxe-select-panel-background-color};
--vxe-select-empty-color: #{$vxe-select-empty-color};
--vxe-optgroup-title-color: #{$vxe-optgroup-title-color};
/*switch*/
--vxe-switch-font-color: #{$vxe-switch-font-color};
--vxe-switch-icon-background-color: #{$vxe-switch-icon-background-color};
--vxe-switch-open-background-color: #{$vxe-switch-open-background-color};
--vxe-switch-close-background-color: #{$vxe-switch-close-background-color};
--vxe-switch-disabled-background-color: #{$vxe-switch-disabled-background-color};
/*pulldown*/
--vxe-pulldown-panel-background-color: #{$vxe-pulldown-panel-background-color};
}

274
styles/cssvar.scss
View File

@@ -1,272 +1,2 @@
/**Variable**/
:root {
/*font*/
--vxe-font-family: #{$vxe-font-family};
--vxe-font-size: #{$vxe-font-size};
--vxe-font-size-medium: #{$vxe-font-size-medium};
--vxe-font-size-small: #{$vxe-font-size-small};
--vxe-font-size-mini: #{$vxe-font-size-mini};
/*size*/
--vxe-border-radius: #{$vxe-border-radius};
/*icon*/
--vxe-icon-font-family: #{$vxe-icon-font-family};
--vxe-icon-background-color: #{$vxe-icon-background-color};
/*color*/
--vxe-font-color: #{$vxe-font-color};
--vxe-primary-color: #{$vxe-primary-color};
--vxe-success-color: #{$vxe-success-color};
--vxe-info-color: #{$vxe-info-color};
--vxe-warning-color: #{$vxe-warning-color};
--vxe-danger-color: #{$vxe-danger-color};
--vxe-font-lighten-color: #{$vxe-font-lighten-color};
--vxe-primary-lighten-color: #{$vxe-primary-lighten-color};
--vxe-success-lighten-color: #{$vxe-success-lighten-color};
--vxe-info-lighten-color: #{$vxe-info-lighten-color};
--vxe-warning-lighten-color: #{$vxe-warning-lighten-color};
--vxe-danger-lighten-color: #{$vxe-danger-lighten-color};
--vxe-font-darken-color: #{$vxe-font-darken-color};
--vxe-primary-darken-color: #{$vxe-primary-darken-color};
--vxe-success-darken-color: #{$vxe-success-darken-color};
--vxe-info-darken-color: #{$vxe-info-darken-color};
--vxe-warning-darken-color: #{$vxe-warning-darken-color};
--vxe-danger-darken-color: #{$vxe-danger-darken-color};
--vxe-font-disabled-color: #{$vxe-font-disabled-color};
--vxe-primary-disabled-color: #{$vxe-primary-disabled-color};
--vxe-success-disabled-color: #{$vxe-success-disabled-color};
--vxe-info-disabled-color: #{$vxe-info-disabled-color};
--vxe-warning-disabled-color: #{$vxe-warning-disabled-color};
--vxe-danger-disabled-color: #{$vxe-danger-disabled-color};
/*input/radio/checkbox*/
--vxe-input-border-color: #{$vxe-input-border-color};
--vxe-input-disabled-color: #{$vxe-input-disabled-color};
--vxe-input-disabled-background-color: #{$vxe-input-disabled-background-color};
--vxe-input-placeholder-color: #{$vxe-input-placeholder-color};
/*popup*/
--vxe-table-popup-border-color: #{$vxe-table-popup-border-color};
/*table*/
--vxe-table-header-font-color: #{$vxe-table-header-font-color};
--vxe-table-footer-font-color: #{$vxe-table-footer-font-color};
--vxe-table-border-radius: #{$vxe-table-border-radius};
--vxe-table-border-width: #{$vxe-table-border-width};
--vxe-table-border-color: #{$vxe-table-border-color};
--vxe-table-resizable-line-color: #{$vxe-table-resizable-line-color};
--vxe-table-resizable-drag-line-color: #{$vxe-table-resizable-drag-line-color};
--vxe-table-header-background-color: #{$vxe-table-header-background-color};
--vxe-table-body-background-color: #{$vxe-table-body-background-color};
--vxe-table-footer-background-color: #{$vxe-table-footer-background-color};
--vxe-table-tree-node-line-color: #{$vxe-table-tree-node-line-color};
--vxe-table-tree-node-line-style: #{$vxe-table-tree-node-line-style};
--vxe-table-header-font-weight: #{$vxe-table-header-font-weight};
--vxe-table-row-height-default: #{$vxe-table-row-height-default};
--vxe-table-row-height-medium: #{$vxe-table-row-height-medium};
--vxe-table-row-height-small: #{$vxe-table-row-height-small};
--vxe-table-row-height-mini: #{$vxe-table-row-height-mini};
--vxe-table-row-line-height: #{$vxe-table-row-line-height};
--vxe-table-row-hover-background-color: #{$vxe-table-row-hover-background-color};
--vxe-table-row-striped-background-color: #{$vxe-table-row-striped-background-color};
--vxe-table-row-hover-striped-background-color: #{$vxe-table-row-hover-striped-background-color};
--vxe-table-row-radio-checked-background-color: #{$vxe-table-row-radio-checked-background-color};
--vxe-table-row-hover-radio-checked-background-color: #{$vxe-table-row-hover-radio-checked-background-color};
--vxe-table-row-checkbox-checked-background-color: #{$vxe-table-row-checkbox-checked-background-color};
--vxe-table-row-hover-checkbox-checked-background-color: #{$vxe-table-row-hover-checkbox-checked-background-color};
--vxe-table-row-current-background-color: #{$vxe-table-row-current-background-color};
--vxe-table-row-hover-current-background-color: #{$vxe-table-row-hover-current-background-color};
--vxe-table-column-padding-default: #{$vxe-table-column-padding-default};
--vxe-table-column-padding-medium: #{$vxe-table-column-padding-medium};
--vxe-table-column-padding-small: #{$vxe-table-column-padding-small};
--vxe-table-column-padding-mini: #{$vxe-table-column-padding-mini};
--vxe-table-column-hover-background-color: #{$vxe-table-column-hover-background-color};
--vxe-table-column-current-background-color: #{$vxe-table-column-current-background-color};
--vxe-table-column-icon-border-color: #{$vxe-table-column-icon-border-color};
--vxe-table-column-icon-border-hover-color: #{$vxe-table-column-icon-border-hover-color};
--vxe-table-cell-placeholder-color: #{$vxe-table-cell-placeholder-color};
--vxe-table-cell-padding-left: #{$vxe-table-cell-padding-left};
--vxe-table-cell-padding-right: #{$vxe-table-cell-padding-right};
--vxe-table-cell-input-height-default: #{$vxe-table-cell-input-height-default};
--vxe-table-cell-input-height-medium: #{$vxe-table-cell-input-height-medium};
--vxe-table-cell-input-height-small: #{$vxe-table-cell-input-height-small};
--vxe-table-cell-input-height-mini: #{$vxe-table-cell-input-height-mini};
--vxe-table-cell-dirty-width: #{$vxe-table-cell-dirty-width};
--vxe-table-cell-dirty-update-color: #{$vxe-table-cell-dirty-update-color};
--vxe-table-cell-dirty-insert-color: #{$vxe-table-cell-dirty-insert-color};
--vxe-table-cell-area-border-color: #{$vxe-table-cell-area-border-color};
--vxe-table-cell-area-border-width: #{$vxe-table-cell-area-border-width};
--vxe-table-cell-main-area-extension-border-color: #{$vxe-table-cell-main-area-extension-border-color};
--vxe-table-cell-main-area-extension-background-color: #{$vxe-table-cell-main-area-extension-background-color};
--vxe-table-cell-extend-area-border-width: #{$vxe-table-cell-extend-area-border-width};
--vxe-table-cell-copy-area-border-width: #{$vxe-table-cell-copy-area-border-width};
--vxe-table-cell-active-area-border-width: #{$vxe-table-cell-active-area-border-width};
--vxe-table-cell-copy-area-border-color: #{$vxe-table-cell-copy-area-border-color};
--vxe-table-cell-extend-area-border-color: #{$vxe-table-cell-extend-area-border-color};
--vxe-table-cell-active-area-border-color: #{$vxe-table-cell-active-area-border-color};
--vxe-table-cell-area-background-color: #{$vxe-table-cell-area-background-color};
--vxe-table-checkbox-range-border-width: #{$vxe-table-checkbox-range-border-width};
--vxe-table-checkbox-range-border-color: #{$vxe-table-checkbox-range-border-color};
--vxe-table-checkbox-range-background-color: #{$vxe-table-checkbox-range-background-color};
--vxe-table-fixed-left-scrolling-box-shadow: #{$vxe-table-fixed-left-scrolling-box-shadow};
--vxe-table-fixed-right-scrolling-box-shadow: #{$vxe-table-fixed-right-scrolling-box-shadow};
/*filter*/
--vxe-table-filter-panel-background-color: #{$vxe-table-filter-panel-background-color};
/*menu*/
--vxe-table-menu-item-width: #{$vxe-table-menu-item-width};
--vxe-table-menu-background-color: #{$vxe-table-menu-background-color};
/*loading*/
--vxe-loading-color: #{$vxe-loading-color};
--vxe-loading-background-color: #{$vxe-loading-background-color};
--vxe-loading-z-index: #{$vxe-loading-z-index};
/*validate*/
--vxe-table-validate-error-color: #{$vxe-table-validate-error-color};
--vxe-table-validate-error-background-color: #{$vxe-table-validate-error-background-color};
/*grid*/
--vxe-grid-maximize-background-color: #{$vxe-grid-maximize-background-color};
/*toolbar*/
--vxe-toolbar-background-color: #{$vxe-toolbar-background-color};
--vxe-toolbar-custom-active-background-color: #{$vxe-toolbar-custom-active-background-color};
--vxe-toolbar-panel-background-color: #{$vxe-toolbar-panel-background-color};
/*tooltip*/
--vxe-tooltip-dark-color: #{$vxe-tooltip-dark-color};
--vxe-tooltip-dark-background-color: #{$vxe-tooltip-dark-background-color};
--vxe-tooltip-light-background-color: #{$vxe-tooltip-light-background-color};
/*pager*/
--vxe-pager-background-color: #{$vxe-pager-background-color};
--vxe-pager-perfect-background-color: #{$vxe-pager-perfect-background-color};
--vxe-pager-perfect-button-background-color: #{$vxe-pager-perfect-button-background-color};
/*modal*/
--vxe-modal-header-background-color: #{$vxe-modal-header-background-color};
--vxe-modal-body-background-color: #{$vxe-modal-body-background-color};
--vxe-modal-border-color: #{$vxe-modal-border-color};
/*checkbox*/
--vxe-checkbox-font-size-default: #{$vxe-checkbox-font-size-default};
--vxe-checkbox-font-size-medium: #{$vxe-checkbox-font-size-medium};
--vxe-checkbox-font-size-small: #{$vxe-checkbox-font-size-small};
--vxe-checkbox-font-size-mini: #{$vxe-checkbox-font-size-mini};
--vxe-checkbox-checked-width: #{$vxe-checkbox-checked-width};
--vxe-checkbox-checked-height: #{$vxe-checkbox-checked-height};
--vxe-checkbox-indeterminate-width: #{$vxe-checkbox-indeterminate-width};
--vxe-checkbox-indeterminate-height: #{$vxe-checkbox-indeterminate-height};
--vxe-checkbox-border-width: #{$vxe-checkbox-border-width};
--vxe-checkbox-border-radius: #{$vxe-checkbox-border-radius};
--vxe-checkbox-icon-background-color: #{$vxe-checkbox-icon-background-color};
--vxe-checkbox-checked-icon-border-color: #{$vxe-checkbox-checked-icon-border-color};
--vxe-checkbox-indeterminate-icon-background-color: #{$vxe-checkbox-indeterminate-icon-background-color};
/*radio*/
--vxe-radio-font-size-default: #{$vxe-radio-font-size-default};
--vxe-radio-font-size-medium: #{$vxe-radio-font-size-medium};
--vxe-radio-font-size-small: #{$vxe-radio-font-size-small};
--vxe-radio-font-size-mini: #{$vxe-radio-font-size-mini};
--vxe-radio-border-width: #{$vxe-radio-border-width};
--vxe-radio-icon-background-color: #{$vxe-radio-icon-background-color};
--vxe-radio-checked-icon-background-color: #{$vxe-radio-checked-icon-background-color};
--vxe-radio-indeterminate-icon-background-color: #{$vxe-radio-indeterminate-icon-background-color};
--vxe-radio-button-default-background-color: #{$vxe-radio-button-default-background-color};
/*button*/
--vxe-button-max-width: #{$vxe-button-max-width};
--vxe-button-default-background-color: #{$vxe-button-default-background-color};
--vxe-button-dropdown-panel-background-color: #{$vxe-button-dropdown-panel-background-color};
--vxe-button-height-default: #{$vxe-button-height-default};
--vxe-button-height-medium: #{$vxe-button-height-medium};
--vxe-button-height-small: #{$vxe-button-height-small};
--vxe-button-height-mini: #{$vxe-button-height-mini};
--vxe-button-round-border-radius-default: #{$vxe-button-round-border-radius-default};
--vxe-button-round-border-radius-medium: #{$vxe-button-round-border-radius-medium};
--vxe-button-round-border-radius-small: #{$vxe-button-round-border-radius-small};
--vxe-button-round-border-radius-mini: #{$vxe-button-round-border-radius-mini};
/*input*/
--vxe-input-background-color: #{$vxe-input-background-color};
--vxe-input-panel-background-color: #{$vxe-input-panel-background-color};
--vxe-input-number-disabled-color: #{$vxe-input-number-disabled-color};
--vxe-input-date-festival-color: #{$vxe-input-date-festival-color};
--vxe-input-date-festival-important-color: #{$vxe-input-date-festival-important-color};
--vxe-input-date-notice-background-color: #{$vxe-input-date-notice-background-color};
--vxe-input-date-picker-hover-background-color: #{$vxe-input-date-picker-hover-background-color};
--vxe-input-date-picker-selected-color: #{$vxe-input-date-picker-selected-color};
--vxe-input-date-time-confirm-button-color: #{$vxe-input-date-time-confirm-button-color};
--vxe-input-date-picker-festival-selected-color: #{$vxe-input-date-picker-festival-selected-color};
--vxe-input-date-picker-notice-selected-background-color: #{$vxe-input-date-picker-notice-selected-background-color};
--vxe-input-date-extra-color: #{$vxe-input-date-extra-color};
--vxe-input-date-extra-important-color: #{$vxe-input-date-extra-important-color};
--vxe-input-date-title-height-default: #{$vxe-input-date-title-height-default};
--vxe-input-date-title-height-medium: #{$vxe-input-date-title-height-medium};
--vxe-input-date-title-height-small: #{$vxe-input-date-title-height-small};
--vxe-input-date-title-height-mini: #{$vxe-input-date-title-height-mini};
--vxe-input-date-time-week-row-height-default: #{$vxe-input-date-time-week-row-height-default};
--vxe-input-date-time-week-row-height-medium: #{$vxe-input-date-time-week-row-height-medium};
--vxe-input-date-time-week-row-height-small: #{$vxe-input-date-time-week-row-height-small};
--vxe-input-date-time-week-row-height-mini: #{$vxe-input-date-time-week-row-height-mini};
--vxe-input-date-month-year-row-height-default: #{$vxe-input-date-month-year-row-height-default};
--vxe-input-date-month-year-row-height-medium: #{$vxe-input-date-month-year-row-height-medium};
--vxe-input-date-month-year-row-height-small: #{$vxe-input-date-month-year-row-height-small};
--vxe-input-date-month-year-row-height-mini: #{$vxe-input-date-month-year-row-height-mini};
--vxe-input-date-quarter-row-height-default: #{$vxe-input-date-quarter-row-height-default};
--vxe-input-date-quarter-row-height-medium: #{$vxe-input-date-quarter-row-height-medium};
--vxe-input-date-quarter-row-height-small: #{$vxe-input-date-quarter-row-height-small};
--vxe-input-date-quarter-row-height-mini: #{$vxe-input-date-quarter-row-height-mini};
--vxe-input-height-default: #{$vxe-input-height-default};
--vxe-input-height-medium: #{$vxe-input-height-medium};
--vxe-input-height-small: #{$vxe-input-height-small};
--vxe-input-height-mini: #{$vxe-input-height-mini};
/*textarea*/
--vxe-textarea-line-height: #{$vxe-textarea-line-height};
--vxe-textarea-background-color: #{$vxe-textarea-background-color};
--vxe-textarea-count-color: #{$vxe-textarea-count-color};
--vxe-textarea-count-background-color: #{$vxe-textarea-count-background-color};
--vxe-textarea-count-error-color: #{$vxe-textarea-count-error-color};
/*form*/
--vxe-form-item-min-height-default: #{$vxe-form-item-min-height-default};
--vxe-form-item-min-height-medium: #{$vxe-form-item-min-height-medium};
--vxe-form-item-min-height-small: #{$vxe-form-item-min-height-small};
--vxe-form-item-min-height-mini: #{$vxe-form-item-min-height-mini};
--vxe-form-background-color: #{$vxe-form-background-color};
--vxe-form-validate-error-color: #{$vxe-form-validate-error-color};
--vxe-form-validate-error-background-color: #{$vxe-form-validate-error-background-color};
/*select*/
--vxe-select-option-height-default: #{$vxe-select-option-height-default};
--vxe-select-option-height-medium: #{$vxe-select-option-height-medium};
--vxe-select-option-height-small: #{$vxe-select-option-height-small};
--vxe-select-option-height-mini: #{$vxe-select-option-height-mini};
--vxe-select-option-hover-background-color: #{$vxe-select-option-hover-background-color};
--vxe-select-panel-background-color: #{$vxe-select-panel-background-color};
--vxe-select-empty-color: #{$vxe-select-empty-color};
--vxe-optgroup-title-color: #{$vxe-optgroup-title-color};
/*switch*/
--vxe-switch-font-color: #{$vxe-switch-font-color};
--vxe-switch-icon-background-color: #{$vxe-switch-icon-background-color};
--vxe-switch-open-background-color: #{$vxe-switch-open-background-color};
--vxe-switch-close-background-color: #{$vxe-switch-close-background-color};
--vxe-switch-disabled-background-color: #{$vxe-switch-disabled-background-color};
/*pulldown*/
--vxe-pulldown-panel-background-color: #{$vxe-pulldown-panel-background-color};
}
@import './variable.scss';
@import './css-variable.scss';

2
styles/default.scss
View File

@@ -1 +1,3 @@
// 该文件已废弃，请使用 vxe-table/style/all.scss
@import './modules.scss';

2
styles/modules.scss
View File

@@ -1,3 +1,5 @@
// 该文件已废弃，请使用 vxe-table/style/all.scss
@import './cssvar.scss';
@import './icon.scss';
@import './filter.scss';

335
types/table.d.ts vendored
View File

@@ -1315,16 +1315,49 @@ export namespace VxeTablePropTypes {
* 列配置信息
*/
export interface ColumnConfig {
/**
* 是否需要为每一列的 VNode 设置 key 属性
*/
useKey?: boolean
/**
* 当鼠标点击列头时，是否要高亮当前列
*/
isCurrent?: boolean
/**
* 当鼠标移到列头时，是否要高亮当前头
*/
isHover?: boolean
/**
* 每一列是否启用列宽调整
*/
resizable?: VxeColumnPropTypes.Resizable
/**
* 每一列的宽度
*/
width?: VxeColumnPropTypes.Width
/**
* 每一列的最小宽度
*/
minWidth?: VxeColumnPropTypes.MinWidth
maxWidth?: VxeColumnPropTypes.MaxWidth,
/**
* 每一列的最大宽度
*/
maxWidth?: VxeColumnPropTypes.MaxWidth
/**
* 固定列允许设置的最大数量（如果是分组，则一个分组算一个）
*/
maxFixedSize?: number
/**
* 每一列的自定义表头单元格数据导出方法，返回自定义的标题
*/
headerExportMethod?: VxeColumnPropTypes.HeaderExportMethod<any>
/**
* 每一列的自定义单元格数据导出方法，返回自定义的值
*/
exportMethod?: VxeColumnPropTypes.ExportMethod<any>
/**
* 每一列的自定义表尾单元格数据导出方法，返回自定义的值
*/
footerExportMethod?: VxeColumnPropTypes.FooterExportMethod<any>
}
export interface ColumnOpts extends ColumnConfig { }
@@ -1333,11 +1366,29 @@ export namespace VxeTablePropTypes {
* 行配置信息
*/
export interface RowConfig {
/**
* 是否需要为每一行的 VNode 设置 key 属性
*/
useKey?: boolean
/**
* 自定义行数据唯一主键的字段名（默认自动生成）
*/
keyField?: string
/**
* 当鼠标点击行时，是否要高亮当前行
*/
isCurrent?: boolean
/**
* 当鼠标移到行时，是否要高亮当前行
*/
isHover?: boolean
/**
* 每一行开启调整行高度
*/
resizable?: boolean
/**
* 只对 show-overflow 有效，每一行的高度
*/
height?: number
}
export interface RowOpts extends RowConfig { }
@@ -1346,12 +1397,18 @@ export namespace VxeTablePropTypes {
* 自定义列配置项
*/
export interface CustomConfig<D = VxeTableDataRow> {
/**
* 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
*/
storage?: boolean | {
visible?: boolean
resizable?: boolean
fixed?: boolean
order?: boolean
}
/**
* 自定义列是否允许列选中的方法，该方法的返回值用来决定这一列的 checkbox 是否可以选中
*/
checkMethod?(params: {
column: VxeTableDefines.ColumnInfo<D>
}): boolean
@@ -1362,6 +1419,9 @@ export namespace VxeTablePropTypes {
* 列调整配置项
*/
export interface ResizableConfig<D = VxeTableDataRow> {
/**
* 列宽拖动的最小宽度
*/
minWidth?: number | string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
@@ -1370,6 +1430,9 @@ export namespace VxeTablePropTypes {
$rowIndex: number
cell: HTMLElement
}) => number | string)
/**
* 列宽拖动的最大宽度
*/
maxWidth?: number | string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
@@ -2056,7 +2119,13 @@ export namespace VxeTablePropTypes {
export type EmptyText = string
export interface LoadingConfig {
/**
* 显示图标
*/
icon?: string
/**
* 显示文字
*/
text?: string
}
export interface LoadingOpts extends LoadingConfig { }
@@ -2069,9 +2138,21 @@ export namespace VxeTablePropTypes {
export type DelayHover = number
export interface ScrollX {
/**
* 指定大于指定列时自动启动横向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false
*/
gt?: number
/**
* 指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数）
*/
oSize?: number
/**
* 是否启用
*/
enabled?: boolean
/**
* 当数据源被更改时，自动将横向滚动条滚动到左侧
*/
scrollToLeftOnChange?: boolean
}
export interface SXOpts extends ScrollX {
@@ -2080,15 +2161,36 @@ export namespace VxeTablePropTypes {
}
export interface ScrollY {
mode?: 'default' | 'wheel'
gt?: number
oSize?: number
enabled?: boolean
scrollToTopOnChange?: boolean
/**
* @deprecated 请使用 row-config.height
* 滚动模式
*/
mode?: 'default' | 'wheel'
/**
* 指定大于指定行时自动启动纵向虚拟滚动，如果为 0 则总是启用；如果需要关闭，可以设置 enabled 为 false（注：启用纵向虚拟滚动之后将不能支持动态行高）
*/
gt?: number
/**
* 指定每次渲染的数据偏移量，偏移量越大渲染次数就越少，但每次渲染耗时就越久（对于低性能浏览器可以设置大一点，减低渲染次数）
*/
oSize?: number
/**
* 是否启用
*/
enabled?: boolean
/**
* 当数据源被更改时，自动将纵向滚动条滚动到顶部
*/
scrollToTopOnChange?: boolean
/**
* 请使用 row-config.height
* @deprecated
*/
rHeight?: number
/**
* 不建议使用
* @deprecated
*/
adaptive?: boolean
}
export interface SYOpts extends ScrollY {
@@ -2101,90 +2203,167 @@ export namespace VxeTablePropTypes {
export type VxeTableProps<D = VxeTableDataRow> = {
size?: VxeTablePropTypes.Size
/**
* 唯一标识
* 当使用某个特定功能时，需要设置才能生效
*/
id?: VxeTablePropTypes.ID
/**
* 表格数据
* 与 loadData 行为一致，更新数据是不会重置状态
*/
data?: VxeTablePropTypes.Data<D>
/**
* 表格的高度；支持铺满父容器或者固定高度，如果设置 auto 为铺满父容器（如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素）
*/
height?: VxeTablePropTypes.Height
/**
* 表格最小高度
*/
minHeight?: VxeTablePropTypes.MinHeight
/**
* max-height
*/
maxHeight?: VxeTablePropTypes.MaxHeight
/**
* 不建议使用，被 column-config.resizable 替换
* @deprecated
* 是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）
*/
resizable?: VxeTablePropTypes.Resizable
stripe?: VxeTablePropTypes.Stripe
/**
* 是否为圆角边框
*/
round?: VxeTablePropTypes.Round
/**
* 是否带有边框
*/
border?: VxeTablePropTypes.Border
/**
* 表格是否显示加载中
*/
loading?: VxeTablePropTypes.Loading
/**
* 所有的列对齐方式
*/
align?: VxeTablePropTypes.Align
/**
* 所有的表头列的对齐方式
*/
headerAlign?: VxeTablePropTypes.HeaderAlign
/**
* 所有的表尾列的对齐方式
*/
footerAlign?: VxeTablePropTypes.FooterAlign
/**
* 是否显示表头
*/
showHeader?: VxeTablePropTypes.ShowHeader
/**
* 不建议使用，被 row-config.isCurrent 替换
* @deprecated
* 是否显示表尾
*/
highlightCurrentRow?: VxeTablePropTypes.HighlightCurrentRow
/**
* 不建议使用，被 row-config.isHover 替换
* @deprecated
*/
highlightHoverRow?: VxeTablePropTypes.HighlightHoverRow
/**
* 不建议使用，被 column-config.isCurrent 替换
* @deprecated
*/
highlightCurrentColumn?: VxeTablePropTypes.HighlightCurrentColumn
/**
* 不建议使用，被 column-config.isHover 替换
* @deprecated
*/
highlightHoverColumn?: VxeTablePropTypes.HighlightHoverColumn
/**
* 已废弃
* @deprecated
*/
highlightCell?: VxeTablePropTypes.HighlightCell
showFooter?: VxeTablePropTypes.ShowFooter
/**
* 表尾的数据获取方法，返回一个二维数组
*/
footerMethod?: VxeTablePropTypes.FooterMethod<D>
/**
* 给行附加 className
*/
rowClassName?: VxeTablePropTypes.RowClassName<D>
/**
* 给单元格附加 className
*/
cellClassName?: VxeTablePropTypes.CellClassName<D>
/**
* 给表头的行附加 className
*/
headerRowClassName?: VxeTablePropTypes.HeaderRowClassName<D>
/**
* 给表头的单元格附加 className
*/
headerCellClassName?: VxeTablePropTypes.HeaderCellClassName<D>
/**
* 给表尾的行附加 className
*/
footerRowClassName?: VxeTablePropTypes.FooterRowClassName<D>
/**
* 给表尾的单元格附加 className
*/
footerCellClassName?: VxeTablePropTypes.FooterCellClassName<D>
/**
* 给单元格附加样式
*/
cellStyle?: VxeTablePropTypes.CellStyle<D>
/**
* 给行附加样式，也可以是函数
*/
rowStyle?: VxeTablePropTypes.RowStyle<D>
/**
* 给表头单元格附加样式
*/
headerCellStyle?: VxeTablePropTypes.HeaderCellStyle<D>
/**
* 给表头行附加样式
*/
headerRowStyle?: VxeTablePropTypes.HeaderRowStyle<D>
/**
* 给表尾行附加样式
*/
footerRowStyle?: VxeTablePropTypes.FooterRowStyle<D>
/**
* 给表尾单元格附加样式
*/
footerCellStyle?: VxeTablePropTypes.FooterCellStyle<D>
/**
* 临时合并指定的单元格 (不能用于展开行，不建议用于固定列、树形结构)
*/
mergeCells?: VxeTablePropTypes.MergeCells<D>
/**
* 临时合并表尾 (不能用于展开行，不建议用于固定列、树形结构)
*/
mergeFooterItems?: VxeTablePropTypes.MergeFooterItems<D>
/**
* 自定义合并函数，返回计算后的值 (不能用于虚拟滚动、展开行，不建议用于固定列、树形结构)
*/
spanMethod?: VxeTablePropTypes.SpanMethod<D>
/**
* 表尾合并行或列，返回计算后的值 (不能用于虚拟滚动、展开行，不建议用于固定列、树形结构)
*/
footerSpanMethod?: VxeTablePropTypes.FooterSpanMethod<D>
/**
* 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）
*/
showOverflow?: VxeTablePropTypes.ShowOverflow
/**
* 设置表头所有内容过长时显示为省略号
*/
showHeaderOverflow?: VxeTablePropTypes.ShowHeaderOverflow
/**
* 设置表尾所有内容过长时显示为省略号
*/
showFooterOverflow?: VxeTablePropTypes.ShowFooterOverflow
/**
* 请使用 column-config.useKey
* @deprecated
* 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等
*/
columnKey?: VxeTablePropTypes.ColumnKey
/**
* 请使用 row-config.useKey
* @deprecated
*/
rowKey?: VxeTablePropTypes.RowKey
/**
* 请使用 row-config.keyField
* @deprecated
*/
rowId?: VxeTablePropTypes.RowId
keepSource?: VxeTablePropTypes.KeepSource
/**
* 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
*/
autoResize?: VxeTablePropTypes.AutoResize
/**
* 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到）
*/
syncResize?: VxeTablePropTypes.SyncResize
/**
* 列配置信息
*/
columnConfig?: VxeTablePropTypes.ColumnConfig
/**
* 行配置信息
*/
rowConfig?: VxeTablePropTypes.RowConfig
/**
* 个性化信息配置项
*/
customConfig?: VxeTablePropTypes.CustomConfig<D>
resizeConfig?: VxeTablePropTypes.ResizeConfig
resizableConfig?: VxeTablePropTypes.ResizableConfig<D>
@@ -2210,7 +2389,68 @@ export type VxeTableProps<D = VxeTableDataRow> = {
editRules?: VxeTablePropTypes.EditRules<D>
emptyText?: VxeTablePropTypes.EmptyText
emptyRender?: VxeTablePropTypes.EmptyRender
/**
* 加载中配置项
*/
loadingConfig?: VxeTablePropTypes.LoadingConfig
/**
* 横向虚拟滚动配置（不支持展开行）
*/
scrollX?: VxeTablePropTypes.ScrollX
/**
* 纵向虚拟滚动配置（不支持展开行）
*/
scrollY?: VxeTablePropTypes.ScrollY
/**
* 自定义参数（可以用来存放一些自定义的数据）
*/
params?: VxeTablePropTypes.Params
/**
* 已废弃，不建议使用，被 column-config.resizable 替换
* @deprecated
*/
resizable?: VxeTablePropTypes.Resizable
/**
* 已废弃，不建议使用，被 row-config.isCurrent 替换
* @deprecated
*/
highlightCurrentRow?: VxeTablePropTypes.HighlightCurrentRow
/**
* 已废弃，不建议使用，被 row-config.isHover 替换
* @deprecated
*/
highlightHoverRow?: VxeTablePropTypes.HighlightHoverRow
/**
* 已废弃，不建议使用，被 column-config.isCurrent 替换
* @deprecated
*/
highlightCurrentColumn?: VxeTablePropTypes.HighlightCurrentColumn
/**
* 已废弃，不建议使用，被 column-config.isHover 替换
* @deprecated
*/
highlightHoverColumn?: VxeTablePropTypes.HighlightHoverColumn
/**
* 已废弃
* @deprecated
*/
highlightCell?: VxeTablePropTypes.HighlightCell
/**
* 已废弃，请使用 column-config.useKey
* @deprecated
*/
columnKey?: VxeTablePropTypes.ColumnKey
/**
* 已废弃，请使用 row-config.useKey
* @deprecated
*/
rowKey?: VxeTablePropTypes.RowKey
/**
* 已废弃，请使用 row-config.keyField
* @deprecated
*/
rowId?: VxeTablePropTypes.RowId
/**
* 不建议使用，已废弃
* @deprecated
@@ -2226,9 +2466,6 @@ export type VxeTableProps<D = VxeTableDataRow> = {
* @deprecated
*/
delayHover?: VxeTablePropTypes.DelayHover
scrollX?: VxeTablePropTypes.ScrollX
scrollY?: VxeTablePropTypes.ScrollY
params?: VxeTablePropTypes.Params
}
export type VxeTableEmits = [