优化

src/shared/components/DataTable.test.ts

@@ -5,7 +5,11 @@ import DataTable, { createPaginationItems, normalizePage, normalizePageSizes, ty
 import LayoutPreferenceList from './LayoutPreferenceList.vue'
 import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
 
-const TableStub = defineComponent({ template: '<div><slot /></div>', methods: { doLayout() {} } })
+const TableStub = defineComponent({
+  props: { border: Boolean, stripe: Boolean },
+  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)"><slot /></div>',
+  methods: { doLayout() {} },
+})
 const ColumnStub = defineComponent({
   inheritAttrs: false,
   props: { label: String, prop: String },
@@ -69,6 +73,26 @@ describe('DataTable pagination helpers', () => {
 describe('DataTable column preferences', () => {
   beforeEach(() => localStorage.clear())
 
+  it('enables bordered striped business tables by default and allows explicit opt-out', () => {
+    const defaultTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(defaultTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'true', 'data-stripe': 'true' })
+
+    const plainTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, border: false, stripe: false },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(plainTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'false', 'data-stripe': 'false' })
+  })
+
   it('uses key as the data property for ordinary columns only', () => {
     const wrapper = shallowMount(DataTable, {
       props: {

src/shared/components/DataTable.vue

@@ -64,12 +64,16 @@ const props = withDefaults(defineProps<{
   pageSizes?: number[]
   preferenceKey?: string
   columnSettingsMode?: 'auto' | 'show' | 'hide'
+  border?: boolean
+  stripe?: boolean
 }>(), {
   loading: false,
   emptyText: '暂无数据',
   total: undefined,
   pageSizes: () => [10, 20, 50, 100],
   columnSettingsMode: 'auto',
+  border: true,
+  stripe: true,
 })
 
 const page = defineModel<number>('page', { default: 1 })
@@ -294,7 +298,7 @@ function setPage(value: number) {
         </div>
       </div>
     </div>
-    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
+    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :border="border" :stripe="stripe" :aria-busy="loading">
       <el-table-column
         v-for="(column, index) in visibleColumns"
         :key="columnRenderKey(column, index)"