mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3983 - For DataTable
This commit is contained in:
parent
e0194b3af4
commit
9c2d39313f
10 changed files with 152 additions and 78 deletions
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPTOptions('root') } : ptm('thead')" data-pc-section="thead">
|
||||
<thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
|
||||
<template v-if="!columnGroup">
|
||||
<tr role="row" v-bind="ptm('headerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<DTHeaderCell
|
||||
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
|
||||
:column="col"
|
||||
:index="i"
|
||||
@column-click="$emit('column-click', $event)"
|
||||
@column-mousedown="$emit('column-mousedown', $event)"
|
||||
@column-dragstart="$emit('column-dragstart', $event)"
|
||||
|
@ -46,7 +47,7 @@
|
|||
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
|
||||
:style="getFilterColumnHeaderStyle(col)"
|
||||
:class="getFilterColumnHeaderClass(col)"
|
||||
v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
|
||||
v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
|
||||
>
|
||||
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
|
||||
<DTColumnFilter
|
||||
|
@ -91,7 +92,7 @@
|
|||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPTOptions(row, 'root') }">
|
||||
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPT(row, 'root', i) }">
|
||||
<template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
|
||||
<DTHeaderCell
|
||||
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
|
||||
|
@ -232,38 +233,53 @@ export default {
|
|||
columnProp(col, prop) {
|
||||
return ObjectUtils.getVNodeProp(col, prop);
|
||||
},
|
||||
getColumnGroupPTOptions(key) {
|
||||
return this.ptmo(this.getColumnGroupProps(), key, {
|
||||
getColumnGroupPT(key) {
|
||||
const columnGroupMetaData = {
|
||||
props: this.getColumnGroupProps(),
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
},
|
||||
context: {
|
||||
type: 'header'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
|
||||
},
|
||||
getColumnGroupProps() {
|
||||
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
|
||||
},
|
||||
getRowPTOptions(row, key) {
|
||||
return this.ptmo(this.getRowProp(row), key, {
|
||||
getRowPT(row, key, index) {
|
||||
const rowMetaData = {
|
||||
props: row.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
},
|
||||
context: {
|
||||
index
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
|
||||
},
|
||||
getRowProp(row) {
|
||||
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
|
||||
},
|
||||
getColumnPTOptions(column, key) {
|
||||
return this.ptmo(this.getColumnProp(column), key, {
|
||||
getColumnPT(column, key, index) {
|
||||
const columnMetaData = {
|
||||
props: column.props,
|
||||
parent: {
|
||||
props: this.$props,
|
||||
state: this.$data
|
||||
},
|
||||
context: {
|
||||
index
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) };
|
||||
},
|
||||
getColumnProp(column) {
|
||||
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue