diff --git a/packages/theme-saas/src/svgs/grid-no-data.svg b/packages/theme-saas/src/svgs/grid-no-data.svg
new file mode 100644
index 000000000..d6b5c30d1
--- /dev/null
+++ b/packages/theme-saas/src/svgs/grid-no-data.svg
@@ -0,0 +1,41 @@
+
diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less
index 776a5d5a1..2b8288b1f 100644
--- a/packages/theme/src/base/dark-theme.less
+++ b/packages/theme/src/base/dark-theme.less
@@ -334,6 +334,11 @@
// -- 暗色新增 --
--tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-icon-inverse-tint: var(--tv-base-color-common-13); // #000 暗色反色成黑色：按钮下拉线头
+ // -- 空状态图标 --
+ --tv-color-no-data-gary-1: var(--tv-base-color-common-10); // #262626
+ --tv-color-no-data-gary-2: var(--tv-base-color-common-9); // #333333
+ --tv-color-no-data-border: var(--tv-base-color-common-5); // #999999
+ --tv-color-no-data-brand: var(--tv-base-color-brand-7); // #317AF7
/** 2.6 背景色 **/
diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
index a4a2b868c..3a652e9dc 100644
--- a/packages/theme/src/base/vars.less
+++ b/packages/theme/src/base/vars.less
@@ -334,7 +334,11 @@
// -- 暗色新增 --
--tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-icon-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：按钮下拉线头
-
+ // -- 空状态图标 --
+ --tv-color-no-data-gary-1: var(--tv-base-color-common-4); // #f0f0f0
+ --tv-color-no-data-gary-2: var(--tv-base-color-common-1); // #ffffff
+ --tv-color-no-data-border: var(--tv-base-color-common-8); // #808080
+ --tv-color-no-data-brand: var(--tv-base-color-brand-6); // #317af7
/** 2.6 背景色 **/
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 484aceaa1..1e0834c3e 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -761,7 +761,6 @@
width: 100%;
height: 100px;
margin: 0;
- background: var(--tv-Grid-empty-img) 50% no-repeat;
}
& &__empty-text {
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index 29fea3dfb..fbcf336b0 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -224,8 +224,6 @@
--tv-Grid-select-option-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
// 加载中背景色
--tv-Grid-loading-mask-bg-color: var(--tv-color-bg-mask-block, rgba(255, 255, 255, 70%));
- // 表格无数据背景图片
- --tv-Grid-empty-img: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=');
// 边框模式复选框禁用边框色
--tv-Grid-border-color-disabled: var(--tv-color-border-disabled, #dbdbdb);
// 复选框过滤器模式底色
diff --git a/packages/theme/src/svgs/grid-no-data.svg b/packages/theme/src/svgs/grid-no-data.svg
new file mode 100644
index 000000000..cc0eb462f
--- /dev/null
+++ b/packages/theme/src/svgs/grid-no-data.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/vue-icon-saas/index.ts b/packages/vue-icon-saas/index.ts
index 6c07aac91..44bee36b3 100644
--- a/packages/vue-icon-saas/index.ts
+++ b/packages/vue-icon-saas/index.ts
@@ -455,6 +455,7 @@ import IconMaterial from './src/material'
import IconMilestone from './src/milestone'
import IconMinscreenRight from './src/minscreen-right'
import IconNoData from './src/no-data'
+import IconGridNoData from './src/grid-no-data'
import IconNoNews from './src/no-news'
import IconNoPerm from './src/no-perm'
import IconNoResult from './src/no-result'
@@ -1520,6 +1521,8 @@ export {
IconMinscreenRight as iconMinscreenRight,
IconNoData,
IconNoData as iconNoData,
+ IconGridNoData,
+ IconGridNoData as iconGridNoData,
IconNoNews,
IconNoNews as iconNoNews,
IconNoPerm,
@@ -2063,6 +2066,7 @@ export default {
IconMilestone,
IconMinscreenRight,
IconNoData,
+ IconGridNoData,
IconNoNews,
IconNoPerm,
IconNoResult,
diff --git a/packages/vue-icon/index.ts b/packages/vue-icon/index.ts
index 6c07aac91..44bee36b3 100644
--- a/packages/vue-icon/index.ts
+++ b/packages/vue-icon/index.ts
@@ -455,6 +455,7 @@ import IconMaterial from './src/material'
import IconMilestone from './src/milestone'
import IconMinscreenRight from './src/minscreen-right'
import IconNoData from './src/no-data'
+import IconGridNoData from './src/grid-no-data'
import IconNoNews from './src/no-news'
import IconNoPerm from './src/no-perm'
import IconNoResult from './src/no-result'
@@ -1520,6 +1521,8 @@ export {
IconMinscreenRight as iconMinscreenRight,
IconNoData,
IconNoData as iconNoData,
+ IconGridNoData,
+ IconGridNoData as iconGridNoData,
IconNoNews,
IconNoNews as iconNoNews,
IconNoPerm,
@@ -2063,6 +2066,7 @@ export default {
IconMilestone,
IconMinscreenRight,
IconNoData,
+ IconGridNoData,
IconNoNews,
IconNoPerm,
IconNoResult,
diff --git a/packages/vue-icon/src/grid-no-data/index.ts b/packages/vue-icon/src/grid-no-data/index.ts
new file mode 100644
index 000000000..5e386387a
--- /dev/null
+++ b/packages/vue-icon/src/grid-no-data/index.ts
@@ -0,0 +1,4 @@
+import { svg } from '@opentiny/vue-common'
+import NoData from '@opentiny/vue-theme/svgs/grid-no-data.svg'
+
+export default () => svg({ name: 'IconGridNoData', component: NoData })()
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 7a406d072..98bf54c94 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -36,11 +36,11 @@ import {
} from '@opentiny/vue-renderless/grid/utils'
import { getCellLabel } from '../../tools'
import GlobalConfig from '../../config'
-import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
+import { iconChevronRight, iconChevronDown, iconGridNoData } from '@opentiny/vue-icon'
import { h, hooks, $prefix, defineComponent } from '@opentiny/vue-common'
import { getTreeChildrenKey, getTreeShowKey, handleRowGroupFold, isVirtualRow } from '../../table/src/strategy'
import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
-
+const GridNoData = iconGridNoData()
// 滚动、拖动过程中不需要触发鼠标移入移出事件
const isOperateMouse = ($table) =>
$table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
@@ -752,7 +752,7 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
function renderDefEmpty(h) {
return [
- h('p', {
+ h(GridNoData, {
class: 'tiny-grid__empty-img'
}),
h(
diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts
index b50451161..f865264e5 100644
--- a/packages/vue/src/grid/src/table/src/table.ts
+++ b/packages/vue/src/grid/src/table/src/table.ts
@@ -43,6 +43,7 @@ import { clearOnTableUnmount } from './strategy'
import MfTable from '../../mobile-first/index.vue'
import { useDrag, useRowGroup } from '../../composable'
import { isServer } from '@opentiny/utils'
+import { iconGridNoData } from '@opentiny/vue-icon'
const { themes, viewConfig, columnLevelKey, defaultColumnName } = GlobalConfig
const { TINY: T_TINY, SAAS: T_SAAS } = themes
@@ -50,6 +51,7 @@ const { DEFAULT: V_DEFAULT, MF: V_MF, CARD: V_CARD, LIST: V_LIST } = viewConfig
const { MF_SHOW_LIST: V_MF_LIST } = viewConfig
const hiddenContainerClass = 'tiny-grid-hidden-column'
+const GridNoData = iconGridNoData()
// 校验插件是否被注册
function verifyConfig(_vm) {
@@ -121,7 +123,7 @@ const renderEmptyPartFn = (opt) => {
emptyVnodes = [renderEmpty(h, _vm)]
} else {
emptyVnodes = [
- h('p', { class: 'tiny-grid__empty-img' }),
+ h(GridNoData, { class: 'tiny-grid__empty-img' }),
h('span', { class: 'tiny-grid__empty-text' }, GlobalConfig.i18n('ui.grid.emptyText'))
]
}