Skip to content

Commit

Permalink
feat(table): add new class name t-table-tr--level-${level} to table r…
Browse files Browse the repository at this point in the history 
…ow element (Tencent#2547)

* feat(table): add new class name t-table-tr--level-${level} to table row element

* test: update snapshots
  • Loading branch information
@chaishi
chaishi authored and methodchen committed Aug 25, 2023
1 parent ed35798 commit 6ccc236
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 39 deletions.
12 changes: 12 additions & 0 deletions src/table/enhanced-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
defineComponent, SetupContext, computed, ref,
} from '@vue/composition-api';
import get from 'lodash/get';
import baseTableProps from './base-table-props';
import primaryTableProps from './primary-table-props';
import enhancedTableProps from './enhanced-table-props';
Expand All @@ -11,6 +12,7 @@ import {
import useTreeData from './hooks/useTreeData';
import useTreeSelect from './hooks/useTreeSelect';
import { TableListeners } from './base-table';
import { usePrefixClass } from '../hooks/useConfig';

const PRIMARY_B_EVENTS = [
'cell-click',
Expand Down Expand Up @@ -44,6 +46,7 @@ export default defineComponent({

setup(props: TdEnhancedTableProps, context: SetupContext) {
const primaryTableRef = ref();
const classPrefix = usePrefixClass();

const {
store, dataSource, formatTreeColumn, swapData, ...treeInstanceFunctions
Expand Down Expand Up @@ -105,8 +108,10 @@ export default defineComponent({

return {
store,
classPrefix,
dataSource,
tColumns,
treeDataMap,
tIndeterminateSelectedRowKeys,
enhancedTableRef: primaryTableRef,
primaryTableRef,
Expand All @@ -131,6 +136,12 @@ export default defineComponent({
});
return listeners;
},
getRowClassName({ row }: { row: TableRowData }) {
const rowValue = get(row, this.rowKey || 'id');
const rowState = this.treeDataMap.get(rowValue);
if (!rowState) return [this.rowClassName];
return [`${this.classPrefix}-table-tr--level-${rowState.level}`, this.rowClassName];
},
},

render() {
Expand All @@ -143,6 +154,7 @@ export default defineComponent({
indeterminateSelectedRowKeys: this.tIndeterminateSelectedRowKeys,
// 树形结构不允许本地数据分页
disableDataPage: Boolean(this.tree && Object.keys(this.tree).length),
rowClassName: this.getRowClassName,
};
// 事件，Vue3 do not need this.getListener
const on: TableListeners = {
Expand Down
74 changes: 37 additions & 37 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122849,7 +122849,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
class="t-table__body"
>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人 0_1 号"
>
<td
Expand Down Expand Up @@ -122955,7 +122955,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人 1_1 号"
>
<td
Expand Down Expand Up @@ -123077,7 +123077,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人 2_1 号"
>
<td
Expand Down Expand Up @@ -123199,7 +123199,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人 3_1 号"
>
<td
Expand Down Expand Up @@ -123327,7 +123327,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人 4_1 号"
>
<td
Expand Down Expand Up @@ -123449,7 +123449,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人懒加载节点 66666，点我体验"
>
<td
Expand Down Expand Up @@ -123577,7 +123577,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree.vue 1`] = `
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
data-id="申请人懒加载节点 88888，点我体验 "
>
<td
Expand Down Expand Up @@ -124090,7 +124090,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
style="transform: translateY(0px);"
>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124210,7 +124210,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124330,7 +124330,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124450,7 +124450,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124570,7 +124570,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124690,7 +124690,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124810,7 +124810,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -124930,7 +124930,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125050,7 +125050,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125170,7 +125170,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125290,7 +125290,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125410,7 +125410,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125530,7 +125530,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125650,7 +125650,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125770,7 +125770,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -125890,7 +125890,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126010,7 +126010,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126130,7 +126130,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126250,7 +126250,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126370,7 +126370,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126490,7 +126490,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126610,7 +126610,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126730,7 +126730,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126850,7 +126850,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -126970,7 +126970,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -127090,7 +127090,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -127210,7 +127210,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -127330,7 +127330,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -127450,7 +127450,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down Expand Up @@ -127570,7 +127570,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/tree-select.vue 1`] =
</td>
</tr>
<tr
class=""
class="t-table-tr--level-0"
>
<td
class="t-table__expandable-icon-cell"
Expand Down
Loading

0 comments on commit 6ccc236

Please sign in to comment.