feat(Table): 使用Rem规范修改Table组件样式命名 (DevCloudFE#341)

Author: xingyan95

packages/devui-vue/devui/table/src/components/body/body.scss

@@ -1,34 +1,38 @@
 @import '../../../../styles-var/devui-var.scss';
 
-.devui-tbody {
- tr {
- font-size: $devui-font-size-card-title;
- color: $devui-text;
- border: none;
- border-bottom: 1px solid $devui-dividing-line;
- background-color: $devui-base-bg;
+.devui-table {
+ &__tbody {
+ tr {
+ font-size: $devui-font-size-card-title;
+ color: $devui-text;
+ border: none;
+ border-bottom: 1px solid $devui-dividing-line;
+ background-color: $devui-base-bg;
 
- &.hover-enabled:hover {
- background-color: $devui-list-item-hover-bg;
- }
+  &.hover-enabled:hover {
+  background-color: $devui-list-item-hover-bg;
+  }
 
- td {
- padding: 10px;
- border: none;
+ td {
+ padding: 10px;
+ border: none;
+ }
  }
  }
 }
 
-.devui-sticky-cell {
- position: sticky;
- z-index: 5;
- background-color: inherit;
+.devui-table {
+ &--sticky-cell {
+ position: sticky;
+ z-index: 5;
+ background-color: inherit;
 
- &.left {
- box-shadow: rgba(0, 0, 0, 0.05) $devui-shadow-length-slide-right;
- }
+  &.left {
+  box-shadow: rgba(0, 0, 0, 0.05) $devui-shadow-length-slide-right;
+  }
 
- &.right {
- box-shadow: rgba(0, 0, 0, 0.05) $devui-shadow-length-slide-left;
+ &.right {
+ box-shadow: rgba(0, 0, 0, 0.05) $devui-shadow-length-slide-left;
+ }
  }
 }

packages/devui-vue/devui/table/src/components/body/body.tsx

@@ -1,16 +1,17 @@
 import { defineComponent, inject, computed, PropType, toRef } from 'vue';
 import { TABLE_TOKEN } from '../../table-types';
-import { Checkbox } from '../../../../checkbox';
-
-import './body.scss';
 import { Column } from '../column/column-types';
+import { Checkbox } from '../../../../checkbox';
 import { useFixedColumn } from '../../composable/use-table';
+import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import './body.scss';
 
 export default defineComponent({
  name: 'DTableBody',
  setup() {
  const table = inject(TABLE_TOKEN);
  const { _data: data, _columns: columns, _checkList: checkList, isFixedLeft } = table.store.states;
+ const ns = useNamespace('table');
 
  // 移动到行上是否高亮
  const hoverEnabled = computed(() => table.props.rowHoveredHighlight);
@@ -19,7 +20,7 @@ export default defineComponent({
  const tdAttrs = computed(() =>
  isFixedLeft.value
  ? {
- class: 'devui-sticky-cell left',
+ class: `${ns.m('sticky-cell')} left`,
  style: 'left:0;',
  }
  : null
@@ -32,7 +33,7 @@ export default defineComponent({
  ) : null;
 
  return () => (
- <tbody class='devui-tbody'>
+ <tbody class={ns.e('tbody')}>
  {data.value.map((row, rowIndex) => {
  return (
  <tr key={rowIndex} class={{ 'hover-enabled': hoverEnabled.value }}>

packages/devui-vue/devui/table/src/components/fix-header.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import ColGroup from './colgroup/colgroup';
 import TableHeader from './header/header';
 import TableBody from './body/body';
+import { useNamespace } from '../../../shared/hooks/use-namespace';
 
 export default defineComponent({
  props: {
@@ -14,19 +15,21 @@ export default defineComponent({
  },
  },
  setup(props: { classes: Record<string, unknown>; isEmpty: boolean }) {
+ const ns = useNamespace('table');
+
  return () => {
  return (
- <div class='devui-table-view'>
- <div style='overflow:hidden scroll;'>
- <table class={props.classes} cellpadding='0' cellspacing='0'>
+ <div class={ns.e('fix-header')}>
+ <div style="overflow:hidden scroll;">
+ <table class={props.classes} cellpadding="0" cellspacing="0">
  <ColGroup />
  <TableHeader />
  </table>
  </div>
- <div class='scroll-view'>
- <table class={props.classes} cellpadding='0' cellspacing='0'>
+ <div class={ns.e('scroll-view')}>
+ <table class={props.classes} cellpadding="0" cellspacing="0">
  <ColGroup />
- {!props.isEmpty && <TableBody style='flex: 1' />}
+ {!props.isEmpty && <TableBody style="flex: 1" />}
  </table>
  </div>
  </div>

packages/devui-vue/devui/table/src/components/header/header.scss

@@ -1,44 +1,48 @@
 @import '../../../../styles-var/devui-var.scss';
 
-.devui-thead {
- tr {
- font-size: $devui-font-size-card-title;
- color: $devui-text;
- font-weight: 700;
- border: none;
- border-bottom: 1px solid $devui-line;
- background-color: $devui-base-bg;
-
- th {
- text-align: left;
- padding: 0;
+.devui-table {
+ &__thead {
+ tr {
+ font-size: $devui-font-size-card-title;
+ color: $devui-text;
+ font-weight: 700;
  border: none;
+ border-bottom: 1px solid $devui-line;
+ background-color: $devui-base-bg;
+
+ th {
+ text-align: left;
+ padding: 0;
+ border: none;
+ }
  }
- }
 
- .header-container {
- position: relative;
- display: flex;
- align-items: center;
- padding-left: 2px;
- padding-right: 8px;
+  .header-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 2px;
+  padding-right: 8px;
 
- .title {
- display: inline-block;
- line-height: 36px;
- vertical-align: middle;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- cursor: default;
+ .title {
+ display: inline-block;
+ line-height: 36px;
+ vertical-align: middle;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ cursor: default;
+ }
  }
  }
 }
 
-.header-bg {
- thead.devui-thead {
- tr {
- background: var(--devui-list-item-hover-bg, #f2f5fc);
+.devui-table {
+ &--header-bg {
+ thead.devui-thead {
+ tr {
+ background: var(--devui-list-item-hover-bg, #f2f5fc);
+ }
  }
  }
 }

packages/devui-vue/devui/table/src/components/header/header.tsx

@@ -1,41 +1,41 @@
 import { defineComponent, inject, computed, PropType, toRefs } from 'vue';
 import { TABLE_TOKEN } from '../../table-types';
 import { Column } from '../column/column-types';
-
 import { Checkbox } from '../../../../checkbox';
 import { Sort } from '../sort';
 import { Filter } from '../filter';
-
-import './header.scss';
-import '../body/body.scss';
 import { useFliter, useSort } from './use-header';
 import { useFixedColumn } from '../../composable/use-table';
+import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import './header.scss';
+import '../body/body.scss';
 
 export default defineComponent({
  name: 'DTableHeader',
  setup() {
  const table = inject(TABLE_TOKEN);
  const { _checkAll: checkAll, _halfChecked: halfChecked, _columns: columns, isFixedLeft } = table.store.states;
+ const ns = useNamespace('table');
 
  const thAttrs = computed(() =>
  isFixedLeft.value
  ? {
- class: 'devui-sticky-cell left',
+ class: `${ns.m('sticky-cell')} left`,
  style: 'left:0;',
  }
  : null
  );
  const checkbox = computed(() =>
  table.props.checkable ? (
  <th {...thAttrs.value}>
- <Checkbox style='padding:10px;' v-model={checkAll.value} halfchecked={halfChecked.value} />
+ <Checkbox style="padding:10px;" v-model={checkAll.value} halfchecked={halfChecked.value} />
  </th>
  ) : null
  );
 
  return () => {
  return (
- <thead class='devui-thead'>
+ <thead class={ns.e('thead')}>
  <tr>
  {checkbox.value}
  {columns.value.map((column, index) => (
@@ -70,7 +70,7 @@ const Th = defineComponent({
 
  return () => (
  <th class={stickyCell.value} style={offsetStyle.value}>
- <div class='header-container'>
+ <div class="header-container">
  {props.column.renderHeader()}
  {props.column.filterable && (
  <Filter v-model={filteredRef.value} filterList={props.column.filterList} customTemplate={props.column.customFilterTemplate} />

packages/devui-vue/devui/table/src/composable/use-table.ts

@@ -1,18 +1,20 @@
 import { computed, ComputedRef, CSSProperties, Ref, ToRefs } from 'vue';
 import { Column } from '../components/column/column-types';
 import { TablePropsTypes } from '../table-types';
+import { useNamespace } from '../../../shared/hooks/use-namespace';
 
 interface TableConfig {
  classes: ComputedRef<Record<string, boolean>>;
  style: ComputedRef<CSSProperties>;
 }
 
 export function useTable(props: TablePropsTypes): TableConfig {
+ const ns = useNamespace('table');
  const classes = computed(() => ({
- 'devui-table': true,
- 'devui-table-striped': props.striped,
- 'header-bg': props.headerBg,
- 'table-layout-auto': props.tableLayout === 'auto',
+ [ns.e('view')]: true,
+ [ns.m('striped')]: props.striped,
+ [ns.m('header-bg')]: props.headerBg,
+ [ns.m('layout-auto')]: props.tableLayout === 'auto',
  }));
  const style: ComputedRef<CSSProperties> = computed(() => ({
  maxHeight: props.maxHeight,
@@ -24,14 +26,15 @@ export function useTable(props: TablePropsTypes): TableConfig {
 }
 
 export const useFixedColumn = (column: Ref<Column>): ToRefs<{ stickyCell: string; offsetStyle: string }> => {
+ const ns = useNamespace('table');
  const stickyCell = computed(() => {
  const col = column.value;
  if (col.fixedLeft) {
- return `devui-sticky-cell left`;
+ return `${ns.m('sticky-cell')} left`;
  }
 
  if (col.fixedRight) {
- return `devui-sticky-cell right`;
+ return `${ns.m('sticky-cell')} right`;
  }
  return undefined;
  });

packages/devui-vue/devui/table/src/table.scss

@@ -1,49 +1,45 @@
 @import '../../styles-var/devui-var.scss';
 
 .devui-table {
- display: table;
- table-layout: fixed;
  width: 100%;
- border-spacing: 0;
- border: none;
- margin: 0;
- padding: 0;
+ overflow-x: auto;
+ padding-top: 8px;
 
- &-wrapper {
+ &__view {
+ display: table;
+ table-layout: fixed;
  width: 100%;
- overflow-x: auto;
- padding-top: 8px;
+ border-spacing: 0;
+ border: none;
+ margin: 0;
+ padding: 0;
  }
 
- &-striped {
+ &--striped {
  tbody tr:nth-child(even) {
  background-color: $devui-list-item-strip-bg;
  }
  }
 
- &-empty {
+ &__empty {
  width: 100%;
  font-size: $devui-font-size;
  text-align: center;
  }
 
- &-view {
+ &__fix-header {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
-
- & .scroll-view {
- flex: 1;
- overflow: scroll;
- }
  }
-}
 
-.table-layout-auto {
- table-layout: auto;
-}
+ &__scroll-view {
+ flex: 1;
+ overflow: scroll;
+ }
 
-.table-layout-auto {
- table-layout: auto;
+ &--layout-auto {
+ table-layout: auto;
+ }
 }