lundi 6 juillet 2020

How to add checkboxes in vuejs datatable

I have built vuejs data table and now I want add checboxes in my data table I have read many articles but I am stuck how to add into my data table I am new in vuejs and i need your help.I have shortened my code so it should be readable and understandable for you.

My template

<template>
    <div class="users-style">
        <div style="margin-bottom: 20px;">
        </div>
        <table class="table table-bordered table-responsive">
            <thead>
            </thead>
            <tbody>

            <tr v-for="user in paginatedUsers" :key="user.id">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

My script

<script>
    export default {
        created() {
            this.getUsers();
            Fire.$on('reloadUsers', () => {
                this.getUsers();
            })
        },
        data() {
            let sortOrders = {};
            let columns = [
                {label: 'ID', name: 'id' },
                {label: 'User Id', name: 'user_id'},
                {label: 'Message Title', name: 'message_title'},
                {label: 'Process Type', name: 'process_type'},
                {label: 'Message Code', name: 'msg_code'},
                {label: 'Log Type', name: 'log_type'},
                {label: 'Date Time', name: 'created_at'},
            ];
            columns.forEach((column) => {
                sortOrders[column.name] = -1;
            });
            return {
                users: [],
                columns: columns,
                tableShow: {
                    showdata: true,
                },
            }
        },
        methods: {
            getUsers() {
                axios.get('/users/', {params: this.tableShow})
                    .then(response => {
                        console.log('The data: ', response.data);
                        this.users = response.data;
                        this.pagination.total = this.users.length;
                    })
                    .catch(errors => {
                        console.log(errors);
                    });
            },
        },
    };
</script>

I have also shared my current output of my data table and now I want to apply checkboxes on each record and one checkbox on top which i select then all checkboxes should be select. i am really stuck in this i need your help.enter image description here




Aucun commentaire:

Enregistrer un commentaire