Vue Komponente

Die MultiTable Komponente kann auch in eigenen Vue-Gadgets verwendet werden.

Installation

✅ Nach dem das Skript library.js geladen wurde, steht die Komponente <multi-table /> global zur Verwendung bereit.

Beispiel

<div>
    <!-- Optional, wenn kein ouskin.less verwendet wird -->
    <link rel="stylesheet" href="/documents/ext/css/ou/sp/multi-table.css">

    <div id="instance">
        <multi-table v-bind:value="options" v-on:select="onSelectionChanged" v-on:update="updateRows"></multi-table>
    </div>
    <script>
        vueExample = new Vue({
            el: "#instance",
            data: function() {
                return {
                    options: {
                        rows: [{
                                id: 1
                            },
                            {
                                id: 2
                            },
                            {
                                id: 3
                            }
                        ],
                        columns: {
                            id: {
                                type: "Id"
                            }
                        }
                    }
                }
            },
            methods: {
                onSelectionChanged: function(selection) {
                    console.log(selection)
                },
                updateRows: function(rows) {
                    this.options.rows = rows
                }
            }
        })
    </script>
</div>

MultiTable Optionen

v-bind:value

• Type: Object

Bindet die Optionen (siehe MultiTable Optionen)

<multi-table v-bind:value="options"></multi-table>

v-on:select

• Type: (Object[]: selectedRows) => void

(optional) Event wenn die Auswahl sich geändert hat.

<multi-table v-bind:select="onSelectionChanged"></multi-table>

v-on:update

• Type: (Object[]: updatedRows) => void

(optional) Event wenn die Einträge geändert worden sind.

<multi-table v-bind:update="updateRowsCallback"></multi-table>

tipp

Wird nur im Aktivierungsmodus getriggert.