+
@@ -105,17 +112,18 @@ import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
import TableHeader from '../header/header'
import TableBody from '../body/body'
-import store, { storeMixin } from '../store'
-
+import { Store, storageMixin } from '../store'
export default {
+ store () {
+ return new Store()
+ },
name: 'NAdvanceTable',
- store,
components: {
TableBody,
searchInput,
TableHeader
},
- mixins: [storeMixin, withapp, themeable],
+ mixins: [storageMixin, withapp, themeable],
props: {
search: {
/**
@@ -189,6 +197,7 @@ export default {
},
data () {
return {
+ headerHeight: 0,
copyData: [],
sortIndexs: {},
wrapperWidth: 'unset',
@@ -205,6 +214,16 @@ export default {
}
},
computed: {
+ tableWrapperStl () {
+ let stl = {}
+ if (this.maxWidth) {
+ stl.maxWidth =
+ typeof this.maxWidth === 'number'
+ ? this.maxWidth + 'px'
+ : this.maxWidth
+ }
+ return stl
+ },
fixedLeftColumn () {
return this.columns
.filter(column => {
@@ -297,12 +316,6 @@ export default {
? this.maxHeight + 'px'
: this.maxHeight
}
- if (this.maxWidth) {
- stl.maxWidth =
- typeof this.maxWidth === 'number'
- ? this.maxWidth + 'px'
- : this.maxWidth
- }
if (this.minHeight !== 'unset') {
stl.minHeight =
typeof this.minHeight === 'number'
@@ -374,6 +387,9 @@ export default {
}
},
watch: {
+ '$store.state.currentHoverRow' (index, oldIndex) {
+ console.log('TCL: index, oldIndex', index, oldIndex)
+ },
currentPage (val) {
if (this.pagination.custom === true) {
this.useRemoteChange()
@@ -450,11 +466,11 @@ export default {
this.tbodyWidth = this.relTable.offsetWidth
this.headerRealEl = this.$refs.header.$el.querySelector('thead')
+ this.headerHeight = this.headerRealEl.offsetHeight
this.fixedLeftTBodyEl = this.$refs.fixedLeftTbody.$el
// console.log(this.wrapperWidth, this.tbodyWidth)
this.init()
- this.$store.commit('currentHoverRow', 1)
// window.addEventListener('resize', this.init)
},
@@ -462,6 +478,12 @@ export default {
// window.removeEventListener('resize', this.init)
},
methods: {
+ add () {
+ this.$store.commit(
+ 'currentHoverRow',
+ this.$store.state.currentHoverRow + 1
+ )
+ },
onBodyScrolll (event) {
this.headerRealEl.style.transform = `translate3d(-${event.target.scrollLeft}px,0,0)`
if (this.fixedLeftTBodyEl) {
diff --git a/packages/common/AdvanceTable/store.js b/packages/common/AdvanceTable/store.js
index bb2d49a3d..1ee6798c1 100644
--- a/packages/common/AdvanceTable/store.js
+++ b/packages/common/AdvanceTable/store.js
@@ -1,22 +1,45 @@
/*
* @Author: Volankey@gmail.com
* @Company: Tusimple
- * @Date: 2019-10-24 14:03:55
+ * @Date: 2019-10-25 11:31:12
* @LastEditors: Jiwen.bai
- * @LastEditTime: 2019-10-24 14:49:04
+ * @LastEditTime: 2019-10-25 11:33:00
*/
-import Vue from 'vue'
-import Vuex from './TableStore'
-Vue.use(Vuex)
-
-export default new Vuex.Store()
-export const storeMixin = {
- beforeCreate: function vuexInit () {
- const options = this.$options
- // store injection
- if (options.store) {
- this.$store =
- typeof options.store === 'function' ? options.store() : options.store
- }
+let Vue = null
+export class Store {
+ constructor (options = {}) {
+ const store = this
+ store._vm = new Vue({
+ data: {
+ $$state: {
+ currentHoverRow: 1
+ }
+ }
+ })
+ }
+ get state () {
+ return this._vm._data.$$state
+ }
+ commit (type, payload) {
+ Vue.set(this._vm._data.$$state, type, payload)
+ // this.state[type] = payload
}
}
+
+function vuexInit () {
+ const options = this.$options
+ const _Vue = options.Vue
+ if (_Vue) {
+ Vue = _Vue
+ }
+ // store injection
+ if (options.store) {
+ this.$store =
+ typeof options.store === 'function' ? options.store() : options.store
+ } else if (options.parent && options.parent.$store) {
+ this.$store = options.parent.$store
+ }
+}
+export const storageMixin = {
+ beforeCreate: vuexInit
+}
diff --git a/packages/common/AdvanceTable/utils.js b/packages/common/AdvanceTable/utils.js
new file mode 100644
index 000000000..85910ef79
--- /dev/null
+++ b/packages/common/AdvanceTable/utils.js
@@ -0,0 +1,14 @@
+/*
+ * @Author: Volankey@gmail.com
+ * @Company: Tusimple
+ * @Date: 2019-10-24 18:07:27
+ * @LastEditors: Jiwen.bai
+ * @LastEditTime: 2019-10-24 18:07:27
+ */
+export const removeClass = (dom, className) => {
+ dom.classList.remove(className)
+}
+
+export const addClass = (dom, className) => {
+ dom.classList.add(className)
+}
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss
index 211787929..83da7786a 100644
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@@ -98,6 +98,9 @@
word-wrap: break-word;
word-break: break-all;
table-layout: fixed;
+ tbody tr:hover {
+ background-color: transparent;
+ }
}
&::-webkit-scrollbar {
width: 5px;
@@ -130,6 +133,9 @@
border-radius: 2.5px;
background: $--table-scrollbar-color;
}
+ tr.n-table__tr--hover {
+ background-color: $--table-row-hover;
+ }
}
@include e(header) {
overflow: hidden;
@@ -137,6 +143,9 @@
i {
color: $--table-header-icon-color;
}
+ th {
+ box-sizing: border-box;
+ }
}
}
}
diff --git a/styles/Table.scss b/styles/Table.scss
index 0dd6d3503..521c36472 100644
--- a/styles/Table.scss
+++ b/styles/Table.scss
@@ -1,5 +1,5 @@
-@import "./mixins/mixins.scss";
-@import "./themes/vars.scss";
+@import './mixins/mixins.scss';
+@import './themes/vars.scss';
@include themes-mixin {
@include b(table) {
@@ -34,6 +34,7 @@
background-color: $--table-body-background-color;
color: $--table-body-color;
tr {
+ transition: background-color 0.3s;
td {
padding: 16px 6px 12px 19px;
text-align: left;