Vuejs virtual-table Test

MoneyTableTemplate.vue

<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>

VueVirtualTableTest.vue

<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>

test with vue-virtual-table