Question

我正在使用Quasar Framework和VueJS。我有Data Table component允许单项选择。数据表数据每5秒通过websockets事件自动更新。如果我选择了一个项目，那么每次更新数据表数据时，都会取消选择该项目，并且我希望在数据更新后保留项目选择。

有没有办法实现这个目标？我正在考虑两种不同的方法，但我不知道该怎么做，至少不是来自documentation：

直接访问数据表选定项目
处理选择项目时触发的事件

在这两种情况下，主要的想法是将选择保存在商店中，在数据表项更新完成后恢复选择。

<template>
    <q-layout>
        <!-- Main block start-->
        <div class="scroll" style="width: 100%">
            <div class="layout-padding">
                <div class="row" style="margin-top: 30px;">
                    <q-data-table :data="dataTableData" :config="config" :columns="columns" @refresh="refresh">

                    </q-data-table>
                </div>
            </div>
        </div>
        <!-- Man block end-->
    </q-layout>
</template>

<script>

export default {
    sockets:{
        connect: function(){
            console.log('socket connected')
        },
        info: function(data){
            console.log('sockets: info',data)
            //This is where I should get the current selected item if exists
            this.dataTableData = data;
            //This is where I should restore the selected item
        }
    },
    methods: {
        getInfo: function(val){
            this.$socket.emit('getInfo', val);
        },
        refresh (done) {
            this.$socket.emit('getInfo');
            done();
        }
    },
    created: function(){
        this.getInfo()
    },
    data: function () {
        return {
            dataTableData: [],
            config: {
                title: 'My Data Table',
                refresh: true,
                columnPicker: false,
                leftStickyColumns: 0,
                rightStickyColumns: 0,
                rowHeight: '50px',
                responsive: true,
                selection: 'single',
                messages: {
                    noData: '<i>warning</i> No data available to show.'
                }
            },
            columns: [
                { label: 'Name', field: 'name', width: '200px', sort: true },
                { label: 'Size', field: 'size', width: '50px', sort: true },
                { label: 'Status', field: 'status', width: '50px', sort: true },
                { label: 'Progress', field: 'progress', width: '150px', sort: false },
                { label: 'Speed', field: 'speed', width: '50px', sort: false },
                { label: 'ETA', field: 'eta', width: '50px', sort: false }
            ],
            pagination: false,
            rowHeight: 50,
            bodyHeightProp: 'auto',
            bodyHeight: 'auto'
        }
    },
    watch: {
    }
}
</script>

更新据我所知，they're already working in this enenhancement为Quasar-Framework v0.14 =）

数据更新/刷新后如何保留数据表选定的项目（Quasar-Framework）

0 个答案: