javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-table] support tableLayout (#5860)

Browse Source 
* feat(components): [el-table] support tableLayout

* fix: typo

* fix: remove unused var

* fix: optimize code

* fix: typo
This commit is contained in:
msidolphin
2022-02-10 09:35:29 +08:00
committed by GitHub
parent 563b8692e6
commit 04ed04effd
10 changed files with 269 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
packages/components/table/src/table-header/index.ts
View File

@@ -11,7 +11,6 @@ import ElCheckbox from '@element-plus/components/checkbox'
import { useNamespace } from '@element-plus/hooks'
import FilterPanel from '../filter-panel.vue'
import useLayoutObserver from '../layout-observer'
import { hColgroup } from '../h-helper'
import { TABLE_INJECTION_KEY } from '../tokens'
import useEvent from './event-helper'
import useStyle from './style.helper'
@@ -62,7 +61,6 @@ export default defineComponent({
const instance = getCurrentInstance() as TableHeader
const parent = inject(TABLE_INJECTION_KEY)
const ns = useNamespace('table')
const storeData = parent?.store.states
const filterPanels = ref({})
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)
onMounted(() => {
@@ -100,7 +98,6 @@ export default defineComponent({
return {
ns,
columns: storeData.columns,
filterPanels,
onColumnsChange,
onScrollableChange,
@@ -123,7 +120,6 @@ export default defineComponent({
render() {
const {
ns,
columns,
isGroup,
columnRows,
getHeaderCellStyle,
@@ -141,118 +137,104 @@ export default defineComponent({
} = this
let rowSpan = 1
return h(
'table',
'thead',
{
border: '0',
cellpadding: '0',
cellspacing: '0',
class: ns.e('header'),
class: { [ns.is('group')]: isGroup },
},
[
hColgroup(columns),
columnRows.map((subColumns, rowIndex) =>
h(
'thead',
'tr',
{
class: { [ns.is('group')]: isGroup },
class: getHeaderRowClass(rowIndex),
key: rowIndex,
style: getHeaderRowStyle(rowIndex),
},
columnRows.map((subColumns, rowIndex) =>
h(
'tr',
subColumns.map((column, cellIndex) => {
if (column.rowSpan > rowSpan) {
rowSpan = column.rowSpan
}
return h(
'th',
{
class: getHeaderRowClass(rowIndex),
key: rowIndex,
style: getHeaderRowStyle(rowIndex),
class: getHeaderCellClass(
rowIndex,
cellIndex,
subColumns,
column
),
colspan: column.colSpan,
key: `${column.id}-thead`,
rowspan: column.rowSpan,
style: getHeaderCellStyle(
rowIndex,
cellIndex,
subColumns,
column
),
onClick: ($event) => handleHeaderClick($event, column),
onContextmenu: ($event) =>
handleHeaderContextMenu($event, column),
onMousedown: ($event) => handleMouseDown($event, column),
onMousemove: ($event) => handleMouseMove($event, column),
onMouseout: handleMouseOut,
},
subColumns.map((column, cellIndex) => {
if (column.rowSpan > rowSpan) {
rowSpan = column.rowSpan
}
return h(
'th',
[
h(
'div',
{
class: getHeaderCellClass(
rowIndex,
cellIndex,
subColumns,
column
),
colspan: column.colSpan,
key: `${column.id}-thead`,
rowSpan: column.rowSpan,
style: getHeaderCellStyle(
rowIndex,
cellIndex,
subColumns,
column
),
onClick: ($event) => handleHeaderClick($event, column),
onContextmenu: ($event) =>
handleHeaderContextMenu($event, column),
onMousedown: ($event) => handleMouseDown($event, column),
onMousemove: ($event) => handleMouseMove($event, column),
onMouseout: handleMouseOut,
class: [
'cell',
column.filteredValue && column.filteredValue.length > 0
? 'highlight'
: '',
column.labelClassName,
],
},
[
h(
'div',
{
class: [
'cell',
column.filteredValue &&
column.filteredValue.length > 0
? 'highlight'
: '',
column.labelClassName,
],
},
[
column.renderHeader
? column.renderHeader({
column,
$index: cellIndex,
store,
_self: $parent,
})
: column.label,
column.sortable &&
h(
'span',
{
onClick: ($event) =>
handleSortClick($event, column),
class: 'caret-wrapper',
},
[
h('i', {
onClick: ($event) =>
handleSortClick($event, column, 'ascending'),
class: 'sort-caret ascending',
}),
h('i', {
onClick: ($event) =>
handleSortClick($event, column, 'descending'),
class: 'sort-caret descending',
}),
]
),
column.filterable &&
h(FilterPanel, {
store: $parent.store,
placement: column.filterPlacement || 'bottom-start',
column,
upDataColumn: (key, value) => {
column[key] = value
},
column.renderHeader
? column.renderHeader({
column,
$index: cellIndex,
store,
_self: $parent,
})
: column.label,
column.sortable &&
h(
'span',
{
onClick: ($event) => handleSortClick($event, column),
class: 'caret-wrapper',
},
[
h('i', {
onClick: ($event) =>
handleSortClick($event, column, 'ascending'),
class: 'sort-caret ascending',
}),
]
),
h('i', {
onClick: ($event) =>
handleSortClick($event, column, 'descending'),
class: 'sort-caret descending',
}),
]
),
column.filterable &&
h(FilterPanel, {
store: $parent.store,
placement: column.filterPlacement || 'bottom-start',
column,
upDataColumn: (key, value) => {
column[key] = value
},
}),
]
)
})
),
]
)
)
),
]
})
)
)
)
},
})