Vue js，引导程序。表格中的过渡效果不起作用

Posted 2023-02-23

【中文标题】Vue js，引导程序。表格中的过渡效果不起作用

【英文标题】：Vue js, bootstrap-vue. Does not work transition effect in table

【发布时间】：2019-11-23 16:03:06

【问题描述】：

我使用 bootstrap-vue。我从文档中举了一个例子 - https://bootstrap-vue.js.org/docs/components/table/#table-body-transition-support。 一切正常。但是如果我用我的数据替换单元格中的数据，效果就会停止工作。为什么会发生？我该如何解决这个问题？

<template>
<div class="container">
    <div class="row">
        <div class="col-sm-12 chartjs">
            <b-table
                    id="table-transition-example"
                    :items="itemsForTable"
                    :fields="fieldsForTable"
                    striped
                    small
                    primary-key="a"
                    :tbody-transition-props="transProps"
            ></b-table>

        </div>
    </div>
</div>

<script>
export default 
    data: function () 
        return 
            fieldsForTable: [
                 key: 'a1', sortable: true ,
                 key: 'b', sortable: true ,

            ],
            itemsForTable: [
                 a1: 2, b: 'Two',
                 a1: 1, b: 'Three'
            ],
            transProps: 
                name: 'flip-list'
            
        ;
    ,
    computed: 
    ,
    mounted() 
    ,
    methods: 
    

【问题讨论】：

提供的答案是否已经足够帮助？

【参考方案1】：

您还需要将primary-key 更新为a2。否则它将不知道更新表中的哪些行与原始表中的行等效，因此无法执行转换。

该字段的值用于为每一行生成 Vue key。它与底层的 Vue key 并不完全相同，该表添加了前缀和后缀，但对于大多数实际用途，您可以将它们视为相同的东西。

【讨论】：

他的数据里没有a2键

我尝试添加主键 =“数字”，但仍然不起作用， key: 'number', label: '#', sortable: true , ...this.fields