Как использовать переходы высоты Vue в строке таблицы - PullRequest
Новая
       40

Как использовать переходы высоты Vue в строке таблицы

0 голосов
/ 05 ноября 2019

У меня есть таблица в виде дерева, созданная в Vue с кнопками для развертывания и свертывания дочерних элементов.

Я пытаюсь выяснить, как настроить переходы Vue, чтобы при развертывании и свертывании разделов их высотаАнимация от и до естественной высоты строки до нуля.

Я пробовал несколько решений, которые я погуглил (например, с помощью тега или is = "transition" и имени перехода вТег

, но, похоже, ни один из них не сработал 

new Vue({
  el: '#tabletree',
  data: {
    treedata: {
      id: 0, desc: 'Item 1', children: [
        {
          id: 1, desc: 'Item 1-1', children: [
            { id: 2, desc: 'Item 1-1-1', children: [] }
          ]
        },
        {
          id: 3, desc: 'Item 1-2', children: [
            { id: 4, desc: 'Item 1-2-1', children: [] },
            { id: 5, desc: 'Item 1-2-2', children: [] }
          ]
        }
      ]
    },
    hidden: []
  },
  methods: {
    toggle: function (id) {
      if (this.hidden.indexOf(id) == -1)
        this.hidden.push(id);
      else
        this.hidden.splice(this.hidden.indexOf(id), 1);
    },
    isVisible: function (ancestors) {
      var vm = this;
      return ancestors.every(function (a) {
        return vm.hidden.indexOf(a) == -1;
      })
    }
  },
  computed: {
    datalist: function () {
      var list = [];
      var traverse = function (obj, level, ids) {
        if (level == null) level = 0;
        if (ids == null) ids = [];
        obj.level = level;
        obj.ancestors = ids;
        list.push(obj);
        var newIds = JSON.parse(JSON.stringify(ids));
        newIds.push(obj.id)
        obj.children.forEach(function (child) {
          traverse(child, level + 1, newIds)
        });
      }
      traverse(this.treedata);
      return list;
    }
  }
});
.nochildren {
  visibility: hidden;
}
.toggle{
  text-decoration: none;
  width:10px;
  display: inline-block;
  text-align: center;
}

.expand-enter-active,
.expand-leave-active {
  transition: expand 0.2s;
  max-height: auto;
}
.expand-enter,
.expand-leave-to
{
  max-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tabletree">

  <table>
    <tr v-for="row in datalist" v-if="isVisible(row.ancestors)">
      <td :style="'padding-left:' + (row.level * 10) + 'px'">
        <a :class="{'toggle':true, 'nochildren':row.children.length == 0}" href="javascript://" v-on:click="toggle(row.id)">
          <span v-if="hidden.indexOf(row.id) == -1">+</span>
          <span v-if="hidden.indexOf(row.id) > -1">-</span>
        </a>
        <span>{{ row.desc }}</span>
      </td>
    </tr>
  </table>

</div>
...