Skip to content

Commit

Permalink
feat: Seperate checkbox-list from table
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwqs
dwqs committed Mar 7, 2018
1 parent 2db82e1 commit b2da611
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 45 deletions.
120 changes: 120 additions & 0 deletions src/components/checkbox-list.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<template>
<div class="v2-checkbox-list-wrap" :style="{
width: column.width + 'px',
height: '100%',
left: table.leftColumns.length ? '0' : -left + 'px',
borderRight: table.leftColumns.length ? 'none' : '1px solid #dfe6ec'
}">
<div class="v2-checkbox-item checked-all" :style="getItemStyle(0)">
<checkbox :cur-row-index="-1"></checkbox>
</div>
<div ref="list" :style="{
position: 'relative',
top: '0px',
height: table.bodyHeight > table.VOEWPORT_MIN_HEIGHT ? table.bodyHeight + 'px' : 'auto',
overflow: table.bodyHeight > table.VOEWPORT_MIN_HEIGHT ? 'hidden' : 'auto',
}">
<ul class="v2-checkbox-list" :style="{height: this.list.length * this.h + 'px'}">
<li class="v2-checkbox-item" v-for="(row, index) in list" :key="index" :style="getItemStyle(index)">
<checkbox :cur-row-index="index" :cur-row="row"></checkbox>
</li>
</ul>
</div>
</div>
</template>

<script>
import CheckBox from './checkbox.vue';
export default {
props: {
column: [Object],
left: {
type: Number,
default: 0
},
top: {
type: Number,
default: 0
}
},
inject: ['table'],
data () {
return {
list: []
};
},
computed: {
h () {
return isNaN(parseInt(this.table.colHeight, 10)) ? 40 : `${parseInt(this.table.colHeight, 10)}`;
}
},
watch: {
top (val, oldVal) {
this.$refs.list.scrollTop = val;
},
'table.data' (val, oldVal) {
if (oldVal.length !== val.length) {
this.list = [].concat(val);
}
}
},
methods: {
getItemStyle (index) {
const style = {};
style.width = isNaN(parseInt(this.column.width, 10)) ? '45px' : `${parseInt(this.column.width, 10)}px`;
style.height = isNaN(parseInt(this.table.colHeight, 10)) ? '40px' : `${parseInt(this.table.colHeight, 10)}px`;
style.textAlign = ['left', 'center', 'right'].indexOf(this.column.align) > -1 ? this.column.align : 'center';
style.lineHeight = style.height;
style.top = parseInt(style.height, 10) * index + 'px';
return style;
}
},
mounted () {
if (this.table.data.length) {
this.list = [].concat(this.table.data);
}
},
components: {
'checkbox': CheckBox
}
};
</script>

<style lang="less">
.v2-checkbox-list-wrap {
position: absolute;
z-index: 99;
box-sizing: border-box;
margin: 0;
padding: 0;
background: #FFFFFF;
border-left: 1px solid #dfe6ec;
border-top: 1px solid #dfe6ec;
}
.v2-checkbox-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.v2-checkbox-item {
position: absolute;
box-sizing: border-box;
border-bottom: 1px solid #dfe6ec;
&.checked-all {
position: relative;
}
}
</style>
18 changes: 9 additions & 9 deletions src/components/checkbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,22 @@
return this.table.isAll;
}
if (this.table.uniqueField) {
return this.table.selectedIndex.includes(this.curRow[this.table.uniqueField]);
}
// if (this.table.uniqueField) {
// return this.table.selectedIndex.includes(this.curRow[this.table.uniqueField]);
// }
return this.table.selectedIndex.includes(curRowIndex);
return this.table.selectedIndex.includes(this.curRowIndex);
},
handleChange (e) {
if (this.curRowIndex === -1) {
this.table.eventBus.$emit('row-select-all', this.val);
} else {
let rowIndex = this.curRowIndex;
if (this.table.uniqueField) {
rowIndex = this.curRow[this.table.uniqueField];
}
this.table.eventBus.$emit('row-select', this.val, rowIndex);
// let rowIndex = this.curRowIndex;
// if (this.table.uniqueField) {
// rowIndex = this.curRow[this.table.uniqueField];
// }
this.table.eventBus.$emit('row-select', this.val, this.curRowIndex);
}
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/table-column.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
props: {
label: String,
prop: String,
width: [Number, String],
width: {
type: [Number, String],
default: 90
},
type: String,
sortable: {
type: Boolean,
Expand Down
6 changes: 3 additions & 3 deletions src/components/table-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@
getColStyle (col) {
const style = {};
style.width = !isNaN(parseInt(col.width)) ? '90px' : `${parseInt(col.width, 10)}px`;
style.height = !isNaN(parseInt(this.table.colHeight, 10)) ? '40px' : `${parseInt(this.table.colHeight, 10)}px`;
if (typeof col.width !== undefined && !isNaN(parseInt(col.width))) {
style.width = `${parseInt(col.width, 10)}px`;
}
// style.textAlign = ['left', 'center', 'right'].indexOf(col.align) > -1 ? col.align : 'center';
return style;
Expand Down
89 changes: 57 additions & 32 deletions src/components/table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
]" ref="table">
<div class="v2-table__table-wrapper">
<div class="v2-table__table-container" ref="container">
<!-- 解耦 checkbox 和 table 在DOM结构上的耦合-->
<checkboxList v-if="selectionColumn"
:column="selectionColumn"
:left="scrollLeft"
:top="scrollTop">
</checkboxList>
<!-- header -->
<div class="v2-table__header-wrapper" ref="header" :style="{width: isContainerScroll ? contentWidth + 'px' : '100%'}">
<div :class="[
Expand Down Expand Up @@ -68,7 +74,7 @@
<div :class="[
'v2-table-fixed',
'v2-table__fixed-left'
]" v-if="leftColumns.length > 0" :style="{width: leftContainerWidth + 'px'}">
]" v-if="leftColumns.length > 0" :style="{width: leftContainerWidth + 'px', marginLeft: selectionColumn ? selectionColumn.width + 'px' : 0}">
<!-- header -->
<div class="v2-table-fixed__header-wrapper">
<div :class="[
Expand Down Expand Up @@ -242,6 +248,7 @@
import TableRow from './table-row.vue';
import EmptyIcon from './empty-icon.vue';
import TableFooter from './table-footer.vue';
import CheckboxList from './checkbox-list.vue';
export default {
name: 'v2-table',
Expand Down Expand Up @@ -308,6 +315,11 @@
type: [Number, String],
default: 40
},
// column header height
colHeight: {
type: [Number, String],
default: 40
},
shownPagination: {
type: Boolean,
Expand All @@ -319,16 +331,16 @@
default: 'auto'
},
updatedSelection: {
// whether updated selection row when data is changed.
type: Boolean,
default: false
},
// updatedSelection: {
// // whether updated selection row when data is changed.
// type: Boolean,
// default: false
// },
uniqueField: {
type: String,
default: ''
},
// uniqueField: {
// type: String,
// default: ''
// },
showSummary: {
type: Boolean,
Expand Down Expand Up @@ -363,6 +375,7 @@
columns: [],
leftColumns: [],
rightColumns: [],
selectionColumn: null,
// row select status
selectedIndex: [],
Expand Down Expand Up @@ -392,7 +405,8 @@
contentHeight: NaN,
bodyHeight: this.VOEWPORT_MIN_HEIGHT,
contentMarginTop: 0,
scrollTop: 0
scrollTop: 0,
scrollLeft: 0
};
},
Expand Down Expand Up @@ -442,10 +456,10 @@
this.rows = [].concat(val);
}
if (this.updatedSelection && this.selectedIndex.length > 0) {
this.emitSelectChange();
return;
}
// if (this.updatedSelection && this.selectedIndex.length > 0) {
// this.emitSelectChange();
// return;
// }
if (this.selectedIndex.length > 0) {
// reset selection status.
Expand All @@ -465,7 +479,9 @@
},
scrollTop (val) {
this.updateRenderRows();
if (this.isMetLazyLoad) {
this.updateRenderRows();
}
}
},
Expand Down Expand Up @@ -590,7 +606,8 @@
this.$refs.footer.scrollLeft = ele.scrollLeft;
}
this.isMetLazyLoad && (this.scrollTop = ele.scrollTop);
this.scrollTop = ele.scrollTop;
this.scrollLeft = ele.scrollLeft;
},
isValidNumber (number) {
Expand Down Expand Up @@ -628,20 +645,22 @@
},
emitSelectChange () {
let rows = [];
if (this.uniqueField) {
this.selectedIndex.forEach(item => {
const r = this.data.filter(d => d[this.uniqueField] === item);
rows = [].concat(...rows, ...r);
});
} else {
// row-index
this.selectedIndex.forEach(item => {
rows.push(this.rows[item]);
});
}
const rows = [];
// if (this.uniqueField) {
// this.selectedIndex.forEach(item => {
// const r = this.data.filter(d => d[this.uniqueField] === item);
// rows = [].concat(...rows, ...r);
// });
// } else {
// }
// row-index
this.selectedIndex.forEach(item => {
rows.push(this.data[item]);
});
this.$emit('select-change', rows);
console.log('rrrr', rows);
},
handleRowSelect (isChecked, rowIndex) {
Expand Down Expand Up @@ -693,11 +712,15 @@
for (let i = from; i < to; i++) {
if (typeof this.data[i] !== 'undefined') {
list.push(this.data[i]);
list.push(Object.assign({}, this.data[i], {
__index: i
}));
}
}
this.contentMarginTop = from * this.rh;
this.from = from;
this.to = to;
return list;
}
},
Expand Down Expand Up @@ -728,8 +751,9 @@
const fixedRightColumnComponents = this.getColumnComponentsByType(columnComponents, 'right');
this.columns = [].concat(selectionColumnComponents, fixedLeftColumnComponents, normalColumnComponents, fixedRightColumnComponents);
this.leftColumns = fixedLeftColumnComponents.length > 0 ? [].concat(selectionColumnComponents, fixedLeftColumnComponents) : [].concat(fixedLeftColumnComponents);
this.leftColumns = fixedLeftColumnComponents.length > 0 ? [].concat(fixedLeftColumnComponents) : [].concat(fixedLeftColumnComponents);
this.rightColumns = [].concat(fixedRightColumnComponents);
this.selectionColumn = selectionColumnComponents.length > 0 ? selectionColumnComponents[0] : null;
if (this.data.length && this.isMetLazyLoad) {
this.initRenderRows();
Expand Down Expand Up @@ -768,7 +792,8 @@
TableRow,
EmptyIcon,
TableColGroup,
TableFooter
TableFooter,
CheckboxList
},
beforeDestroy () {
Expand Down

0 comments on commit b2da611

Please sign in to comment.