diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index b8a30df6..c416f770 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -4,26 +4,28 @@
-
+
+ :columns="cloneColumns">
-
+
-
+ |
@@ -34,6 +36,12 @@
|
+
+
+
+
+
+
@@ -99,6 +107,7 @@
prefixCls: prefixCls,
compiledUids: [],
cloneData: deepCopy(this.data),
+ cloneColumns: deepCopy(this.columns),
showSlotHeader: true,
showSlotFooter: true,
bodyHeight: 0
@@ -155,8 +164,8 @@
}
const $el = this.$els.render;
- for (let i = 0; i < this.columns.length; i++) {
- const column = this.columns[i];
+ for (let i = 0; i < this.cloneColumns.length; i++) {
+ const column = this.cloneColumns[i];
if (column.render) {
for (let j = 0; j < this.data.length; j++) {
// todo 做一个缓存,只在需要改render时再重新编译,data改变时不用再编译
@@ -191,6 +200,22 @@
setCellWidth (column, index) {
return column.width ? column.width : this.columnsWidth[index];
},
+ assignRow (index, obj) {
+ return Object.assign({}, this.cloneData[index], obj);
+ },
+ handleMouseIn (index) {
+ if (this.cloneData[index]._isHover) return;
+ const row = this.assignRow(index, {
+ _isHover: true
+ });
+ this.cloneData.$set(index, row);
+ },
+ handleMouseOut (index) {
+ const row = this.assignRow(index, {
+ _isHover: false
+ });
+ this.cloneData.$set(index, row);
+ },
highlightCurrentRow (index) {
if (!this.highlightRow || this.cloneData[index]._isHighlight) return;
@@ -202,7 +227,7 @@
return true;
}
});
- const row = Object.assign({}, this.cloneData[index], {
+ const row = this.assignRow(index, {
_isHighlight: true
});
this.cloneData.$set(index, row);
@@ -220,7 +245,7 @@
},
toggleSelect (index) {
const status = !this.cloneData[index]._isChecked;
- const row = Object.assign({}, this.cloneData[index], {
+ const row = this.assignRow(index, {
_isChecked: status
});
this.cloneData.$set(index, row);
@@ -243,9 +268,25 @@
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
})
}
+ },
+ parseColumns () {
+ let left = [];
+ let right = [];
+ let center = [];
+ this.cloneColumns.forEach((col) => {
+ if (col.fixed && col.fixed === 'left') {
+ left.push(col);
+ } else if (col.fixed && col.fixed === 'right') {
+ right.push(col);
+ } else {
+ center.push(col);
+ }
+ });
+ this.cloneColumns = left.concat(center).concat(right);
}
},
compiled () {
+ this.parseColumns();
this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(//gmi, '') !== '';
this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(//gmi, '') !== '';
},
@@ -267,6 +308,7 @@
},
columns: {
handler () {
+ this.parseColumns();
this.compileRender(true);
},
deep: true
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 0fbbca45..f8d35dfa 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -122,7 +122,7 @@
}
}
- tr:hover{
+ tr&-row-hover{
td{
background-color: @table-td-hover-bg;
}
@@ -156,7 +156,7 @@
}
&-row-highlight,
- tr&-row-highlight:hover,
+ tr&-row-highlight&-row-hover,
&-stripe &-body tr&-row-highlight:nth-child(2n)
{
td{
diff --git a/test/routers/table.vue b/test/routers/table.vue
index b62445e5..b1af9249 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -9,7 +9,6 @@
${row.age}`
// }
@@ -68,7 +69,8 @@
{
title: '操作',
key: 'action',
-// width: 200,
+ fixed: 'right',
+ width: 200,
render (row, column, index) {
return `编辑`
}