Skip to content

Commit

Permalink
fix: #1732
Browse files Browse the repository at this point in the history
  • Loading branch information
wugaoliang committed May 12, 2021
1 parent 970c9f8 commit 670cc1a
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 29 deletions.
22 changes: 12 additions & 10 deletions components/table/FixedBodyTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
data,
leftFixedData,
rightFixedData,
leftFixedColumns,
rightFixedColumns,
columns,
maxHeight,
scrollBarSize,
Expand All @@ -34,14 +32,16 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
localeDatas,
expandedTreeRows,
setExpandedTreeRows,
rowExpandable
rowExpandable,
flatLeftFixedColumns,
flatRightFixedColumns
} = useContext(TableContext)
let _columns
if (isFixed === 'left') {
_columns = _.cloneDeep(leftFixedColumns)
_columns = _.cloneDeep(flatLeftFixedColumns.filter((i) => !!i.dataKey))
}
if (isFixed === 'right') {
_columns = _.cloneDeep(rightFixedColumns)
_columns = _.cloneDeep(flatRightFixedColumns.filter((i) => !!i.dataKey))
}
const depthArray = []
setDepth(_columns, 0, depthArray)
Expand Down Expand Up @@ -108,6 +108,7 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
rowHeight={eachRowHeight[row.key]}
expandedTree={expandedTreeRows.includes(row.key)}
expandedTreeRows={expandedTreeRows}
flatLeftFixedColumns={flatLeftFixedColumns}
setExpandedTreeRows={setExpandedTreeRows}
isTree={isTree}
isAvgRow={rowConfig.isAvgRow}
Expand All @@ -125,24 +126,25 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
let fixedColumnsWidth
if (isFixed === 'left') {
fixedColumnsWidth = [rowSelection && 'checkbox']
.concat(leftFixedColumns)
.concat(_columns)
.filter((column) => !!column)
.map((c, idx) => realColumnsWidth[idx])
.reduce((total, cur) => {
return total + cur
return total + cur + 1
}, 0)
}
if (isFixed === 'right') {
fixedColumnsWidth = rightFixedColumns
fixedColumnsWidth = flatRightFixedColumns
.filter((column) => !!column.dataKey)
.map((c, idx) => realColumnsWidth[rowSelection ? idx + 1 + rightFixedIndex : idx + rightFixedIndex])
.reduce((total, cur) => {
return total + cur
return total + cur + 1
}, 0)
}
const fixedBodyTableRef = isFixed === 'left' ? leftFixedBodyTableRef : rightFixedBodyTableRef
// **************** 根据排序列处理数据
let _fixedData = isFixed === 'left' ? leftFixedData : rightFixedData
const fixedColumns = isFixed === 'left' ? leftFixedColumns : rightFixedColumns
const fixedColumns = isFixed === 'left' ? flatLeftFixedColumns : flatRightFixedColumns

if (activeSorterColumn) {
const sorter =
Expand Down
3 changes: 2 additions & 1 deletion components/table/HeaderTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ const HeaderTable = ({ isFixed, bodyWidth, rightFixedIndex }) => {
]
.concat(cols)
.filter((column) => !!column)
console.log('eachHeaderHeight', cols, eachHeaderHeight)
return (
<tr key={index}>
{_colums.map((c, idx) => {
Expand Down Expand Up @@ -183,7 +184,7 @@ const HeaderTable = ({ isFixed, bodyWidth, rightFixedIndex }) => {
// 标题事件处理
{...onHeaderRow(_colums, index)}
style={{
height: isFixed ? eachHeaderHeight : 'auto',
height: isFixed && cols.length === 1 ? eachHeaderHeight : 'auto',
boxSizing: 'border-box',
textAlign: alignRightColumns.includes(c.dataKey) ? 'right' : 'left',
background: isRowActive || isColActive ? '#F4F4F4' : '#fbfbfb'
Expand Down
10 changes: 5 additions & 5 deletions components/table/Row.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,24 +39,24 @@ const Row = ({
setHighlightRows,
columns,
expandedRender,
leftFixedColumns,
rightFixedColumns,
hoverRow,
setHoverRow,
prefix,
rowExpandable,
onExpand
onExpand,
flatLeftFixedColumns,
flatRightFixedColumns
} = useContext(TableContext)

const _columns = _.cloneDeep(columns)
const depthArray = []
setDepth(_columns, 0, depthArray)
let rowColumns = flatTreeData(_columns).filter((col) => col.isLast)
if (isFixed === 'left') {
rowColumns = leftFixedColumns
rowColumns = flatLeftFixedColumns.filter((item) => !!item.dataKey)
}
if (isFixed === 'right') {
rowColumns = rightFixedColumns
rowColumns = flatRightFixedColumns.filter((item) => !!item.dataKey)
}
const checkboxConfig = rowSelection && rowSelection.getCheckboxConfig && rowSelection.getCheckboxConfig(allRowData)
const checkboxDisabled = (checkboxConfig && checkboxConfig.disabled) || false
Expand Down
20 changes: 13 additions & 7 deletions components/table/Table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,21 +95,25 @@ const Table = ({
// 右侧冻结
const rightFixedColumn = fixedToColumn && fixedToColumn.right

let leftFixedIndex, rightFixedIndex
let leftFixedIndex, rightFixedIndex, leftFlatIndex, rightFlatIndex
// TODO: 这里是考虑了多级表头的冻结，待优化
flattedColumns.forEach((c, index) => {
if (leftFixedColumn === c.dataKey) {
leftFixedIndex = index
leftFixedIndex = c._rootIndex
leftFlatIndex = index
}
if (rightFixedColumn === c.dataKey) {
rightFixedIndex = index
rightFixedIndex = c._rootIndex
rightFlatIndex = index
}
})
const realLeftFixedColumns = [...flattedColumns].splice(0, leftFixedIndex + 1)
const leftFixedData = getFixedDataByFixedColumn(realLeftFixedColumns, data)
const realRightFixedColumns = [...flattedColumns].splice(rightFixedIndex)
const realLeftFixedColumns = [...columns].splice(0, leftFixedIndex + 1)
const flatLeftFixedColumns = [...flattedColumns].splice(0, leftFlatIndex + 1)
const leftFixedData = getFixedDataByFixedColumn(flatLeftFixedColumns, data)
const realRightFixedColumns = [...columns].splice(rightFixedIndex)
const flatRightFixedColumns = [...flattedColumns].splice(rightFlatIndex)
const rightFixedData = getFixedDataByFixedColumn(flatRightFixedColumns, data)

const rightFixedData = getFixedDataByFixedColumn(realRightFixedColumns, data)
// 同步滚动条
const headerTableRef = useRef(null)
const stickyHeaderRef = useRef(null)
Expand Down Expand Up @@ -191,6 +195,8 @@ const Table = ({
// 标题点击回调事件
onHeaderRow,
onExpand,
flatLeftFixedColumns,
flatRightFixedColumns,
leftFixedColumns: realLeftFixedColumns,
rightFixedColumns: realRightFixedColumns,
realColumnsWidth,
Expand Down
1 change: 1 addition & 0 deletions components/table/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ interface Props {
expandedRender?: (record: object, index: number) => JSX.Element | Promise
rowExpandable?: (record: object ) => JSX.Element | Boolean
maxHeight?: number
scrollWidth?: number
fixedToColumn?: string | FixedOption
pagination?: PaginationProps
errorRowKeys?: string[] | number[]
Expand Down
4 changes: 2 additions & 2 deletions components/table/style/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,15 +192,15 @@
z-index: 1;
position: absolute;
top: 0;
border-right: 2px solid #e6e7e8;
box-shadow: 2px 0 4px rgba(187, 187, 187, 0.4);
overflow: hidden;
}

&__container--fixed-right {
z-index: 1;
position: absolute;
top: 0;
border-left: 2px solid #e6e7e8;
box-shadow: -2px 0 4px rgba(187, 187, 187, 0.4);
overflow: hidden;
}

Expand Down
7 changes: 4 additions & 3 deletions components/table/util.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import _ from 'lodash'

// 将树状数据拍平
export const flatTreeData = (data, flattedData = []) => {
data.forEach((d) => {
export const flatTreeData = (data, flattedData = [], rootIndex) => {
data.forEach((d, index) => {
d._rootIndex = typeof rootIndex === 'undefined' ? index : rootIndex
flattedData.push(d)
if (d.children) {
flatTreeData(d.children, flattedData)
flatTreeData(d.children, flattedData, index)
}
})
return flattedData
Expand Down
111 changes: 110 additions & 1 deletion docs/demo/table/section-special.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const rightOptions = [
'内嵌式',
'内嵌式异步渲染',
'表头分组',
'表头分组固定列',
'表头吸顶',
'固定表头',
'合并单元格'
Expand Down Expand Up @@ -346,6 +347,7 @@ class Demo extends React.Component {
return <Table
columns={this.columns}
data={this.data}
onExpand={(expanded, row) => {
console.log(expanded, row)
}}
Expand Down Expand Up @@ -466,7 +468,114 @@ class Demo extends React.Component {
this.data = data
}
render() {
return <Table columns={this.columns} data={this.data} rowSelection={{
return <Table
columns={this.columns}
fixedToColumn={{left: 'number', right:'gender'}}
scrollWidth={1000}
data={this.data}
rowSelection={{
selectedRowKeys: this.state.selectedRowKeys,
onChange: selectedRowKeys => {
this.setState({selectedRowKeys})
}
}} />
}
}`,
opt: ['表头分组固定列']
},
{
code: `import React from 'react'
import Table from '@hi-ui/hiui/es/table'\n
class Demo extends React.Component {
constructor(props){
super(props)
this.state={selectedRowKeys:[]}
this.columns = [
{
title: 'Name',
dataKey: 'name',
key: '1'
},
{
title: 'Other',
children: [
{
title: 'Age',
dataKey: 'age',
key: 2
},
{
title: 'Address',
children: [
{
title: 'Street',
dataKey: 'street',
key: '3'
},
{
title: 'Block',
children: [
{
title: 'Building',
dataKey: 'building',
key: '4'
},
{
title: 'Door No.',
dataKey: 'number',
key: '5'
}
]
}
]
}
]
},
{
title: 'Company',
key: '6',
children: [
{
title: 'Address',
dataKey: 'companyAddress',
key: '7'
},
{
title: 'Name',
dataKey: 'companyName',
key: '8'
}
]
},
{
title: 'Gender',
dataKey: 'gender',
key: '9'
}
]
let data = []
for (let i = 0; i < 6; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M'
})
}
this.data = data
}
render() {
return <Table
columns={this.columns}
data={this.data}
rowSelection={{
selectedRowKeys: this.state.selectedRowKeys,
onChange: selectedRowKeys => {
this.setState({selectedRowKeys})
Expand Down

0 comments on commit 670cc1a

Please sign in to comment.