冯站长之家官网,网站开发的学习,网站建设开发感想,国内跨境电商平台排行榜前十名注意添加这个属性,会影响到有多少个层级的表头: :header-height“[50, 40]”,即后面的columnIndex
如果有fix的列CustomizedHeader会被调用多次,如果有多个层级的表头,也会被调用多次, 实际被调用次数是(fix数 1 * 表头层级数量)
以下代码均删除了JSX
TS版本代码
templ…注意添加这个属性,会影响到有多少个层级的表头: :header-height“[50, 40]”,即后面的columnIndex
如果有fix的列CustomizedHeader会被调用多次,如果有多个层级的表头,也会被调用多次, 实际被调用次数是(fix数 1 * 表头层级数量)
以下代码均删除了JSX
TS版本代码
templatediv stylewidth: 100%;height: calc(100vh - 84px)el-auto-resizertemplate #default{ height, width }el-table-v2fixed:columnscolumns:datadata:sort-bysortBy:header-height[50, 40]:header-classheaderClasscolumn-sortonSort:widthwidth:heightheighttemplate #headerpropscustomized-header v-bindprops/customized-header/template/el-table-v2/template/el-auto-resizer/div
/templatescript langts setup
import {h, ref} from vue
import {TableV2FixedDir, TableV2Placeholder, TableV2SortOrder} from element-plus
import type {HeaderClassNameGetter,TableV2CustomizedHeaderSlotParam,
} from element-plus
import type {SortBy} from element-plus// 生成带二级表头的 columns
function generateColumns(length 10, prefix column-, props?: any) {return Array.from({length}).map((_, columnIndex) ({...props,key: ${prefix}${columnIndex},dataKey: ${prefix}${columnIndex},title: Column ${columnIndex},width: 150,}))
}function generateData(columns: ReturnTypetypeof generateColumns,length 200,prefix row-
) {return Array.from({ length }).map((_, rowIndex) {return columns.reduce((rowData, column, columnIndex) {rowData[column.dataKey] Row ${rowIndex} - Col ${columnIndex}return rowData},{id: ${prefix}${rowIndex},parentId: null,})})
}function CustomizedHeader({cells, columns, headerIndex}) {if (headerIndex 1) return cellsconst groupCells []let width 0let idx 0columns.forEach((column, columnIndex) {if (column.placeholderSign TableV2Placeholder) {groupCells.push(cells[columnIndex])} else {width cells[columnIndex].props.column.widthidxconst nextColumn columns[columnIndex 1]if (columnIndex columns.length - 1 ||nextColumn?.placeholderSign TableV2Placeholder ||idx (headerIndex 0 ? 4 : 2)) {groupCells.push(h(div,{class: flex items-center justify-center custom-header-cell,role: columnheader,style: {...cells[columnIndex].props.style,width: ${width}px,border: 2px solid #fff}},Group width ${width}))width 0idx 0}}})return groupCells;
}const headerClass ({headerIndex,}: ParametersHeaderClassNameGetterany[0]) {if (headerIndex 0) return el-primary-colorreturn
}const columns generateColumns(70)
let data generateData(columns, 20)columns[0].fixed TableV2FixedDir.LEFTfor (let i 0; i 3; i) columns[i].sortable trueconst sortBy refSortBy({key: column-0,order: TableV2SortOrder.ASC,
})const onSort (_sortBy: SortBy) {data data.reverse()sortBy.value _sortBy
}
/scriptstyle
.el-el-table-v2__header-row .custom-header-cell {border-right: 1px solid var(--el-border-color);
}.el-el-table-v2__header-row .custom-header-cell:last-child {border-right: none;
}.el-primary-color {background-color: var(--el-color-primary);color: var(--el-color-white);font-size: 14px;font-weight: bold;
}.el-primary-color .custom-header-cell {padding: 0 4px;
}
/styleJS版本
templatediv stylewidth: 100%;height: calc(100vh - 84px)el-auto-resizertemplate #default{ height, width }el-table-v2fixed:columnscolumns:datadata:sort-bysortBy:header-height[50, 40]:header-classheaderClasscolumn-sortonSort:widthwidth:heightheighttemplate #headerpropsCustomizedHeader v-bindprops/CustomizedHeader/template/el-table-v2/template/el-auto-resizer/div
/templatescript setup
import { h, ref } from vue
import {TableV2FixedDir,TableV2Placeholder,TableV2SortOrder
} from element-plus// 生成带二级表头的 columns
function generateColumns(length 10, prefix column-) {return Array.from({ length }).map((_, columnIndex) ({key: ${prefix}${columnIndex},dataKey: ${prefix}${columnIndex},title: Column ${columnIndex},width: 150}))
}function generateData(columns, length 200, prefix row-) {return Array.from({ length }).map((_, rowIndex) {return columns.reduce((rowData, column, columnIndex) {rowData[column.dataKey] Row ${rowIndex} - Col ${columnIndex}return rowData},{id: ${prefix}${rowIndex},parentId: null})})
}function CustomizedHeader({ cells, columns, headerIndex }) {if (headerIndex 1) return cellsconst groupCells []let width 0let idx 0columns.forEach((column, columnIndex) {if (column.placeholderSign TableV2Placeholder) {groupCells.push(cells[columnIndex])} else {width cells[columnIndex].props.column.widthidxconst nextColumn columns[columnIndex 1]if (columnIndex columns.length - 1 ||nextColumn?.placeholderSign TableV2Placeholder ||idx (headerIndex 0 ? 4 : 2)) {groupCells.push(h(div,{class: flex items-center justify-center custom-header-cell,role: columnheader,style: {...cells[columnIndex].props.style,width: ${width}px,border: 2px solid #fff}},Group width ${width}))width 0idx 0}}})return groupCells
}const headerClass ({ headerIndex }) {return headerIndex 0 ? el-primary-color :
}const columns generateColumns(70)
let data generateData(columns, 20)columns[0].fixed TableV2FixedDir.LEFTfor (let i 0; i 3; i) {columns[i].sortable true
}const sortBy ref({key: column-0,order: TableV2SortOrder.ASC
})const onSort (_sortBy) {// 创建新数组以保持响应性data [...data].reverse()sortBy.value _sortBy
}/scriptstyle
.el-el-table-v2__header-row .custom-header-cell {border-right: 1px solid var(--el-border-color);
}.el-el-table-v2__header-row .custom-header-cell:last-child {border-right: none;
}.el-primary-color {background-color: var(--el-color-primary);color: var(--el-color-white);font-size: 14px;font-weight: bold;
}.el-primary-color .custom-header-cell {padding: 0 4px;
}
/style
