vue2-datatable select multi check box 상태 유지 하기

vue2-datatable select multi check box 초기화 막기 

---

vue2의 컴포넌트중 무료로 vue2-datatable을 사용 하던중 select box을 설정 하다 

https://onewaytech.github.io/vue2-datatable/examples/dist/  의 예제를 보면 

1번 페이지 에 있다가 

2번에 있다가 

다시 1번으로 가면 

저장이 체크가 풀리게 됩니다. 

기존의 체크상태를 유지 할 필요가 있을때 난감합니다. 

node_modules -> vue2-datatable-component -> src -> Table -> MultiSelect.vue  을 수정해 주었습니다. 

<template>

<!-- <input type="checkbox" v-model="status" @change="toggle" style="margin: 0; vertical-align: middle" name="MultiSelect"> -->

<input type="checkbox" v-model="status" @click="toggle" style="margin: 0; vertical-align: middle" name="MultiSelect">

</template>

<script>

import replaceWith from '../_utils/replaceWith'

/**

* checkbox for multiple select within the leading <th>/<td>

*/

export default {

name: 'MultiSelect',

props: {

selection: { type: Array, required: true },

row: Object, // available for tbody checkbox

rows: Array // available for thead checkbox

},

data: function() {

return {

status: false

}},

computed: {

pos () {

return selection.indexOf(row)

}

},

methods: {

toggle (e) {

console.log("rows1");

console.log(this.rows);

console.log("statues =" + this.status)

console.log("statues =" + this.selection_item)

if (this.rows) {

if(!this.status){

console.log("rows click append")

for(var i=0;i<this.rows.length;i++){

var pos1 = this.selection.indexOf(this.rows[i])

if(pos1 == -1 ){

this.selection.push(this.rows[i])

}

}

console.log(this.selection_item)

}else {

for(var i=0;i<this.rows.length;i++){

var pos1 = this.selection.indexOf(this.rows[i])

console.log(pos1);

this.selection.splice(pos1,1)

}

}

}

if(this.row){

if(!this.status){

this.selection.push(this.row)

return

}else {

var pos1 = this.selection.indexOf(this.row)

this.selection.splice(pos1,1)

return

}

}

return

}

},

watch: {

row : function (){

console.log("watch row")

// console.log(row);

if(this.selection.indexOf(this.row) >=0 ){

this.status = true;

}else {

this.status = false;

}

},rows : function (){

console.log("watch rows")

// console.log(row);

this.status = false;

},selection :function(){

if(this.row){

if(this.selection.indexOf(this.row) >=0 ){

this.status = true;

}else {

this.status = false;

}

}

},status : function(){

}

}

}

</script>

위와 같이 수정하여 사용 합니다. 

그럼 페이지가 변경 되어도 상태가 유지 되게 딥니다.