Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vuejs virtual-table Test
<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>
<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>
@i5on9i
Copy link
Author

i5on9i commented Feb 15, 2021

test with vue-virtual-table

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment