[컴][웹] vue-virtual-table 사용 팁

 

tips / tip / nodejs / table library / vuejs / 간격 / 칼럼

vue-virtual-table 사용 팁

table 값의 update

• vue-virtual-table만의 문제인지는 모르지만, 각 cell 에서 data 를 변경해도, re-render 하지 않는다.(data-binding) 그래서 각 row 안에서의 data-binding 은 할 수 없어서, 각 cell 을 component 로 만들어서 그 안에서만 data-binding 을 사용해야 했다.
• tableConfig 를 update 하는 방법 source code
  

이것은 dataArray.splice 를 이용해서 update 하면 된다. 아래 codes 와 see also. 2 도 참고하자. 다만 이것도 data 클 때는 반응속도가 늦어지는 듯 하다. 될 수 있으면 cell 단위로 끊는 것이 나을 듯 하다. key 를 사용하면 조금 나아진다. 하지만 그래도 cell 로 나눈 것이 훨씬 낫다.

  <vue-virtual-table
    :config="tableConfig"
    :data="dataArray"
    ...

 column width

• table-config 에 보면 width 가 있다. 이 값은 flex-grow 를 set 하게 된다. 그래서 한두 column 만 set 하게 되면, 칼럼의 width 가 들쭉날쭉 할 수 있다. 그래서 전체 column 의 width 를 set 해주는 것이 좋다.

값의 변경

현재의 row 에서 값을 변경한 후에 scroll 을 하게 되면, 그 row 에 다른 값들이 assign 된다. 그렇기 때문에, scroll 이 된 이후에 현재 row 의 내가 변경한 값을 보존하려면, 그 값을 $set 이나 splice 등으로 변경해 줘야한다.(see also. 2

하지만 이렇게 하면, input 에 값을 넣을 때, 변경할 때 rendering 이 과도하게 발생할 수 있다. 한가지 해결책은 변경되는 값만 저장하고, 보여주는 값도, 변경되는 값이 발생한 경우 변경되는 값을 보여주도록 하는 방법을 사용하는 것이다.

아래 한가지 예시가 있다. 대략적으로 설명하면, table 이 있는 곳에서는 rendering 의 호출을 직접하지 않는다. 개인적으로 state 의 변경에 의한 rendering 이 필요한 경우 새로운 component 안에서 한다. 그리고 vue-table 이 있는 component 로 변경내역만 던져주는 식으로 작성한다.

• https://gist.github.com/i5on9i/f9b7d370a9efd164de31abd00ab7ac9f
  

See Also

1. 큰 데이터를 위한 vuejs table library
2. vue.js 에서 computed, method, watch --> object 와 array값이 변경될 때 reactivity
   

codes

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
    :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="myaction"
      slot-scope="scope"
    >
      <input
        :key="`myaction-${scope.index}`"
        :value="scope.subdata.available"        
        @change="onChangeValue(scope.row, scope.index, $event)"
      />
    </template>
    

  </vue-virtual-table>
</template>

<script>
export default {
  ...
  data: function() {
    return {
      ...
      tableAttribute: {
        height: 600,
        itemHeight: 53,
        minWidth: 2000,
        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: '_action', name: '사용여부', actionName: 'myaction', width: 50 },
        ...
      ], 
      tableData: [
        { 'use': true, 'name' : 'a', subdata: { available: true} },
        { 'use': false, 'name' : 'b', subdata: { available: true} },
      ]
    }
  },
  computed: {
   ...
  },
  methods: {
    onChangeValue(row, index, event) {

      row.subdata.available = event.target.value
      this.tableData.splice(index, 1, row)
    },
  }
}
</script>