Vue - как изменить размер строки таблицы таблицы

Question

У меня есть анимация, работающая над таблицей при добавлении новых строк или удалении строк.

Но я хотел бы оживить строки, которые изменить - они не добавляются и не удаляются, но данные, привязанные к этой строке, меняются.

Возможно ли это?

Answer 1

Вы можете либо просмотреть переход состояния, как предлагает @craig_h, либо, возможно, просто настроить регулярное событие javascript, которое следит за завершением анимации.

Чтобы использовать второй метод, вы можете добавить новый параметр changed: false к каждому из данных строк, а затем установите для него значение true, когда оно будет изменено. Затем это может добавить класс в строку «изменено». Затем у вас есть огонь для анимации, когда строка имеет «измененный» класс. Теперь все, что вам нужно сделать, это прослушать событие «анимация» в этой строке и сбросить измененный параметр на false. Что-то вроде:

HTML - строка элемент

<table> 
    <tr 
    ref="rows" 
    :class="{ changed: row.changed }" 
    v-for="(row, index) in rows"> 
    <td><input v-model="row.title" type="text"></td> 
    <td> 
     <button @click="saveRowEdits(index)">save</button> 
    </td> 
    ... 

компонент

data() { 
    return { 
    rows: [ 
     { title: 'foo', changed: false }, 
     { title: 'bar', changed: false }, 
    ], 
    ... 
    } 
}, 
methods: { 
    saveRowEdits (index) { 

    // get the rows DOM el 
    const row = this.$refs.rows[index] 

    // watch for animationend 
    const callback =() => { 
     row.removeEventListener("animationend", callback); 
     this.rows[index].changed = false 
    } 

    row.addEventListener("animationend", callback, false) 

    // update param 
    this.rows[index].changed = true 

    }, 
    ... 

CSS

row.changed { 
    animation: changed-row 1s ...