Last active
February 15, 2021 06:57
-
-
Save i5on9i/f9b7d370a9efd164de31abd00ab7ac9f to your computer and use it in GitHub Desktop.
Vuejs virtual-table Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="d-flex w-100 align-center"> | |
<!-- | |
for v-money | |
the event is called three times | |
if the `@change.native` or `@input` is used, | |
so the @blur.native is used instead. | |
https://github.com/vuejs-tips/v-money/issues/42 | |
--> | |
<input | |
:value="value" | |
:class="`w-100px ${isModified}`" | |
placeholder="on blur, color of text is changed to green" | |
@blur="onBlurStockInput($event.target.value)" | |
/> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: 'MoneyTableTemplate', | |
components: {}, | |
props: { | |
scope: { | |
type: [Object], | |
required: true | |
}, | |
changedValue: { | |
type: [Object], | |
default: function() { | |
return null | |
} | |
} | |
}, | |
data: function() { | |
const ret = { | |
index: this.scope.index, | |
initValue: this.scope.row.stock, | |
value: this.scope.row.stock, | |
isModified: '' | |
} | |
if (this.changedValue != null) { | |
ret.value = this.changedValue.stock | |
ret.isModified = 'color-green' | |
} | |
return ret | |
}, | |
computed: {}, | |
methods: { | |
onBlurStockInput(newValueWithComma) { | |
const newVal = Number(newValueWithComma.replace(/,/g, '')) | |
const preVal = this.value | |
if (newVal !== this.initValue || newVal !== preVal) { | |
this.value = newVal | |
this.isModified = 'color-green' | |
this.$emit('on-change', { | |
value: newVal | |
}) | |
} | |
} | |
} | |
} | |
</script> | |
<style lang="scss" scoped> | |
.color-green { | |
color: #00a96a; | |
} | |
.d-flex { | |
display: flex; | |
} | |
.align-center { | |
align-items: center; | |
} | |
.w-100 { | |
width: 100%; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="hello"> | |
<!-- | |
forceUpdate is needed to render after request and receive the data. | |
Without it, the current modifed value still remains in the input box. | |
--> | |
<vue-virtual-table | |
:key="`${forceUpdate}`" | |
:config="tableConfig" | |
:data="list.data" | |
:height="tableAttribute.height" | |
:item-height="tableAttribute.itemHeight" | |
:min-width="tableAttribute.minWidth" | |
:selectable="tableAttribute.selectable" | |
:enable-export="tableAttribute.enableExport" | |
:bordered="tableAttribute.bordered" | |
:hover-highlight="tableAttribute.hoverHighlight" | |
:language="tableAttribute.language" | |
> | |
<template slot="money" slot-scope="scope"> | |
<money-table-template | |
:key="`money-${scope.index}`" | |
:scope="scope" | |
:changed-value="$Mmap[scope.row.id]" | |
@on-change="onChangeMoney(scope.row, scope.index, $event.value)" | |
/> | |
</template> | |
</vue-virtual-table> | |
</div> | |
</template> | |
<script lang="ts"> | |
import Vue from "vue"; | |
import VueVirtualTable from 'vue-virtual-table'; | |
import MoneyTableTemplate from "./MoneyTableTemplate.vue"; | |
export default Vue.extend({ | |
name: "VueVirtualTableTest", | |
components: { | |
MoneyTableTemplate, | |
VueVirtualTable | |
}, | |
props: { | |
msg: String, | |
}, | |
static: function () { | |
return { | |
map: {}, | |
}; | |
}, | |
data: function () { | |
return { | |
list: { | |
data: [ | |
{id: 1, name: '테스트1', money: 20} | |
] | |
}, | |
mystateMsg: this.msg, | |
tableAttribute: { | |
height: 600, | |
itemHeight: 53, | |
minWidth: 200, | |
selectable: false, | |
enableExport: false, | |
bordered: true, | |
hoverHighlight: true, | |
language: "en", | |
}, | |
// @ref: https://github.com/waningflow/vue-virtual-table#table-config | |
tableConfig: [ | |
{ prop: "_index", name: "No.", width: 20 }, | |
{ | |
prop: "name", | |
name: "상품이름", | |
searchable: true, | |
// sortable: true, | |
width: 200, | |
// summary: 'COUNT' | |
}, | |
{ | |
prop: "_action", | |
name: "", | |
numberFilter: true, | |
actionName: "money", | |
width: 80, | |
}, | |
], | |
forceUpdate: 0, | |
}; | |
}, | |
methods:{ | |
onChangeMoney(row, index, value){ | |
return | |
} | |
}, | |
created(){ | |
this.$Mmap = {} | |
} | |
}); | |
</script> | |
<!-- Add "scoped" attribute to limit CSS to this component only --> | |
<style scoped lang="scss"> | |
h3 { | |
margin: 40px 0 0; | |
} | |
ul { | |
list-style-type: none; | |
padding: 0; | |
} | |
li { | |
display: inline-block; | |
margin: 0 10px; | |
} | |
a { | |
color: #42b983; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
test with vue-virtual-table