@@ -34,7 +38,15 @@
size: String,
fill: String,
textColor: String,
- disabled: Boolean
+ disabled: Boolean,
+ isTab: {
+ type: Boolean,
+ default: false
+ },
+ isFlexEqually: {
+ type: Boolean,
+ default: false
+ }
},
computed: {
@@ -43,6 +55,12 @@
},
radioGroupSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+ },
+ radioGroupIsTab() {
+ return !!this.isTab;
+ },
+ radioGroupIsFlexEqually() {
+ return this.isFlexEqually;
}
},
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index 44afb34b26..57d94208c3 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -3,6 +3,8 @@
class="el-radio"
:class="[
radioSize ? 'el-radio--' + radioSize : '',
+ isTabRadio ? 'el-radio--tab' : '',
+ { 'is-equally-divided': isFlexEqually },
{ 'is-disabled': isDisabled },
{ 'is-focus': focus },
{ 'is-bordered': border },
@@ -103,11 +105,18 @@
return (this.elFormItem || {}).elFormItemSize;
},
radioSize() {
- const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+ const tabRadioDefaultSize = this.isTabRadio ? 'small' : '';
+ const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size || tabRadioDefaultSize;
return this.isGroup
? this._radioGroup.radioGroupSize || temRadioSize
: temRadioSize;
},
+ isTabRadio() {
+ return this.isGroup ? !!this._radioGroup.radioGroupIsTab : false;
+ },
+ isFlexEqually() {
+ return this.isGroup ? !!this._radioGroup.radioGroupIsFlexEqually : false;
+ },
isDisabled() {
return this.isGroup
? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index f652e0b192..5b530440b6 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -5,7 +5,7 @@ import ElRadio from 'kyligence-ui/packages/radio';
import ElTooltip from 'kyligence-ui/packages/tooltip';
import debounce from 'throttle-debounce/debounce';
import LayoutObserver from './layout-observer';
-import ElTableDataCell from './table-data-cell';
+import ElTableRow from './table-row';
export default {
name: 'ElTableBody',
@@ -16,7 +16,7 @@ export default {
ElCheckbox,
ElTooltip,
ElRadio,
- ElTableDataCell
+ ElTableRow
},
props: {
@@ -29,7 +29,9 @@ export default {
rowStyle: [Object, Function],
fixed: String,
highlight: Boolean,
- virtualCellHeight: String
+ virtualCellHeight: String,
+ virtualCellHolder: Function,
+ scrollAncestors: Function
},
render(h) {
@@ -47,34 +49,16 @@ export default {
{
- this._l(this.data, (row, $index) =>
- [ this.handleDoubleClick($event, row) }
- on-click={ ($event) => this.handleClick($event, row) }
- on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
- on-mouseenter={ _ => this.handleMouseEnter($index) }
- on-mouseleave={ _ => this.handleMouseLeave() }
- class={ [this.getRowClass(row, $index)] }>
- {this._l(this.columns, (column, cellIndex) => (
-
- ))}
-
,
+ this._l(this.data, (row, $index) => [
+ ,
this.store.isRowExpanded(row)
? (
|
@@ -82,8 +66,7 @@ export default {
|
)
: ''
- ]
- ).concat(
+ ]).concat(
)
}
diff --git a/packages/table/src/table-data-cell.js b/packages/table/src/table-data-cell.js
deleted file mode 100644
index b41a43a151..0000000000
--- a/packages/table/src/table-data-cell.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import 'intersection-observer';
-import Vue from 'vue';
-import VueWaypoint from 'vue-waypoint';
-
-Vue.use(VueWaypoint);
-
-export default {
- name: 'ElTableDataCell',
-
- props: {
- virtualCellHeight: {
- type: String
- },
- row: {
- type: Object,
- required: true
- },
- column: {
- type: Object,
- required: true
- },
- columnsHidden: {
- type: Array,
- required: true
- },
- $index: {
- type: Number,
- required: true
- },
- cellIndex: {
- type: Number,
- required: true
- },
- store: {
- type: Object,
- required: true
- },
- self: {
- type: Object,
- required: true
- },
- getSpan: {
- type: Function,
- required: true
- },
- getCellStyle: {
- type: Function,
- required: true
- },
- getCellClass: {
- type: Function,
- required: true
- }
- },
-
- data: () => ({
- options: {
- root: null,
- rootMargin: '0px 0px 0px 0px',
- threshold: [0, 1]
- },
- headerInView: false,
- footerInView: false
- }),
-
- methods: {
- handleHeaderWaypoint(params) {
- const { going } = params;
- if (going === 'in') {
- this.headerInView = true;
- } else if (going === 'out') {
- this.headerInView = false;
- }
- },
- handleFooterWaypoint(params) {
- const { going } = params;
- if (going === 'in') {
- this.footerInView = true;
- } else if (going === 'out') {
- this.footerInView = false;
- }
- }
- },
-
- render(h) {
- const { row, column, $index, cellIndex, store, options, self, columnsHidden, virtualCellHeight } = this;
- const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
- const isVirtual = !!virtualCellHeight;
-
- if (!rowspan || !colspan) {
- return '';
- }
-
- if (rowspan === 1 && colspan === 1) {
- return (
- this.$emit('cell-mouse-enter', $event, row) }
- on-mouseleave={ ($event) => this.$emit('cell-mouse-leave', $event) }>
- {isVirtual ? : null}
- {this.headerInView || this.footerInView || !isVirtual ? column.renderCell.call(
- this._renderProxy,
- h,
- {
- row,
- column,
- $index,
- store,
- _self: self
- },
- columnsHidden[cellIndex]
- ) : null}
- {isVirtual ? : null}
- |
- );
- }
-
- return (
- this.$emit('cell-mouse-enter', $event, row) }
- on-mouseleave={ ($event) => this.$emit('cell-mouse-leave', $event) }>
- {isVirtual ? : null}
- {this.headerInView || this.footerInView || !isVirtual ? column.renderCell.call(
- this._renderProxy,
- h,
- {
- row,
- column,
- $index,
- store,
- _self: self
- },
- columnsHidden[cellIndex]
- ) : null}
- {isVirtual ? : null}
- |
- );
- }
-};
diff --git a/packages/table/src/table-row.js b/packages/table/src/table-row.js
new file mode 100644
index 0000000000..37f37ad94b
--- /dev/null
+++ b/packages/table/src/table-row.js
@@ -0,0 +1,146 @@
+import ElWaypoint from 'kyligence-ui/packages/waypoint';
+
+export default {
+ name: 'ElTableRow',
+
+ components: {
+ ElWaypoint
+ },
+
+ props: {
+ virtualCellHeight: String,
+ virtualCellHolder: Function,
+ scrollAncestors: Function,
+ row: Object,
+ index: Number,
+ columnsHidden: Array
+ },
+
+ data: () => ({
+ headerInView: false,
+ footerInView: false
+ }),
+
+ methods: {
+ getScrollParent() {
+ return this.$parent.$parent.$refs['bodyWrapper'];
+ },
+ getScrollAncestors() {
+ const scrollParent = this.getScrollParent();
+ return [...(this.scrollAncestors ? this.scrollAncestors() : []), ...(scrollParent ? [scrollParent] : [])];
+ },
+ getVirtualCellHolder(h) {
+ return this.virtualCellHolder ? this.virtualCellHolder(h) : ;
+ },
+ handleHeaderEnter() {
+ this.headerInView = true;
+ },
+ handleFooterEnter() {
+ this.footerInView = true;
+ }
+ },
+
+ render(h) {
+ const { row, index: $index, $parent, columnsHidden, virtualCellHeight } = this;
+ const isVirtual = !!virtualCellHeight;
+
+ return (
+ $parent.handleDoubleClick($event, row) }
+ on-click={ ($event) => $parent.handleClick($event, row) }
+ on-contextmenu={ ($event) => $parent.handleContextMenu($event, row) }
+ on-mouseenter={ _ => $parent.handleMouseEnter($index) }
+ on-mouseleave={ _ => $parent.handleMouseLeave() }
+ class={ [$parent.getRowClass(row, $index)] }>
+ {
+ $parent._l($parent.columns, (column, cellIndex) => {
+ const { rowspan, colspan } = $parent.getSpan(row, column, $index, cellIndex);
+ if (!rowspan || !colspan) {
+ return '';
+ } else {
+ if (rowspan === 1 && colspan === 1) {
+ return (
+ | $parent.handleCellMouseEnter($event, row) }
+ on-mouseleave={ $parent.handleCellMouseLeave }>
+ {isVirtual && cellIndex === 0 ? (
+
+ ) : null}
+ {this.headerInView || this.footerInView || !isVirtual ? column.renderCell.call(
+ $parent._renderProxy,
+ h,
+ {
+ row,
+ column,
+ $index,
+ store: $parent.store,
+ _self: $parent.context || $parent.table.$vnode.context
+ },
+ columnsHidden[cellIndex]
+ ) : this.getVirtualCellHolder(h)}
+ {isVirtual && cellIndex === 0 ? (
+
+ ) : null}
+ |
+ );
+ } else {
+ return (
+ $parent.handleCellMouseEnter($event, row) }
+ on-mouseleave={ $parent.handleCellMouseLeave }>
+ {isVirtual && cellIndex === 0 ? (
+
+ ) : null}
+ {this.headerInView || this.footerInView || !isVirtual ? column.renderCell.call(
+ $parent._renderProxy,
+ h,
+ {
+ row,
+ column,
+ $index,
+ store: $parent.store,
+ _self: $parent.context || $parent.table.$vnode.context
+ },
+ columnsHidden[cellIndex]
+ ) : this.getVirtualCellHolder(h)}
+ {isVirtual && cellIndex === 0 ? (
+
+ ) : null}
+ |
+ );
+ }
+ }
+ })
+ }
+
+ );
+ }
+};
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index f18fdebf9e..9d94e0b002 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -37,6 +37,7 @@
:style="[bodyHeight]"
@scroll="e => $emit('tbody-scroll', e)">
@@ -143,10 +146,13 @@
fixedBodyHeight]">
@@ -297,6 +306,10 @@
virtualCellHeight: String,
+ virtualCellHolder: Function,
+
+ scrollAncestors: Function,
+
fit: {
type: Boolean,
default: true
@@ -483,6 +496,26 @@
this.layout.updateElsHeight();
}
this.layout.updateColumnsWidth();
+ },
+
+ verifyPosition() {
+ const { tableBody: $tableBody = {} } = this.$refs;
+ const refNames = Object.keys($tableBody.$refs || {});
+
+ for (let i = 0; i <= refNames.length; i += 1) {
+ const refName = refNames[i];
+ if (/^row-.$/.test(refName)) {
+ const $tableRow = $tableBody.$refs[refName] || {};
+ const { waypointTop, waypointBottom } = $tableRow.$refs || {};
+
+ if (waypointTop) {
+ waypointTop.verifyPosition();
+ }
+ if (waypointBottom) {
+ waypointBottom.verifyPosition();
+ }
+ }
+ }
}
},
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index 60bcb61e36..d00b6ec231 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -24,6 +24,10 @@
size: {
type: String,
default: 'medium'
+ },
+ isFull: {
+ type: Boolean,
+ default: false
}
},
@@ -121,7 +125,8 @@
addable,
tabPosition,
disableCommand,
- size
+ size,
+ isFull
} = this;
const newButton = editable || addable
@@ -149,7 +154,7 @@
ref: 'nav'
};
const header = (
-