如何在数据表的每一行添加按钮？

Question

I am using theme DataTable. I want to add edit or delete button in each row with clickable event to get customer id for future operations. I didn't get any solution of adding buttons. I want buttons in actions column. I tried to make custom object of customers with buttons in html but it shows html in actions column not making buttons.

Html:

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">All Customers</h4>
                        <p class="card-title-desc"></p>
                        <div class="row mb-md-2">
                            <div class="col-sm-12 col-md-6">
                                <div id="tickets-table_length" class="dataTables_length">
                                    <label class="d-inline-flex align-items-center">
                                        Show
                                        <b-form-select v-model="perPage" size="sm" :options="pageOptions"></b-form-select>entries
                                    </label>
                                </div>
                            </div>
                            <!-- Search -->
                            <div class="col-sm-12 col-md-6">
                                <div id="tickets-table_filter" class="dataTables_filter text-md-right">
                                    <label class="d-inline-flex align-items-center">
                                        Search:
                                        <b-form-input
                                                v-model="filter"
                                                type="search"
                                                placeholder="Search..."
                                                class="form-control form-control-sm ml-2"
                                        ></b-form-input>
                                    </label>
                                </div>
                            </div>
                            <!-- End search -->
                        </div>
                        <!-- Table -->
                        <div class="table-responsive mb-0">
                            <b-table
                                    :items="customers"
                                    :fields="fields"
                                    responsive="sm"
                                    :per-page="perPage"
                                    :current-page="currentPage"
                                    :sort-by.sync="sortBy"
                                    :sort-desc.sync="sortDesc"
                                    :filter="filter"
                                    :filter-included-fields="filterOn"
                                    @filtered="onFiltered"
                            ></b-table>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="dataTables_paginate paging_simple_numbers float-right">
                                    <ul class="pagination pagination-rounded mb-0">
                                        <!-- pagination -->
                                        <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
```

Script:

 data() {
            return {
                customers: [],
                totalRows: 1,
                currentPage: 1,
                perPage: 10,
                pageOptions: [10, 25, 50, 100],
                filter: null,
                filterOn: [],
                sortBy: "master_number",
                sortDesc: true,
                fields: [
                    { key: "master_number", sortable: true },
                    { key: "name", sortable: true },
                    { key: "co_applicant", sortable: true },
                    { key: "country", sortable: true },
                    { key: "phone", sortable: true },
                    { key: "email", sortable: true },
                    { key: "actions", sortable: true },
                ]
            };
        },
computed: {
            rows() {
                return this.customers.length;
            }
        },
methods: {
            onFiltered(filteredItems) {
                this.totalRows = filteredItems.length;
                this.currentPage = 1;
            },
            getAllCustomers(){
                axios.get(this.$path + 'all_customers').then((response) => {
                    this.customers = response.data.data
                }).catch((error)=>{
                    console.log('error', error);
                });
            }
        },
 mounted() {
            this.getAllCustomers();
            this.totalRows = this.customers.length;
        }

This is what i tried till now.

     
     getAllCustomers(){
                axios.get(this.$path + 'all_customers').then((response) => {
                    var i;
                    var cusArr = [];
                    for(i = 0; i < response.data.data.length; i++){
                        var customerArr = {
                            'master_number': response.data.data[i].master_number,
                            'name': response.data.data[i].name,
                            'co_applicant': response.data.data[i].co_applicant,
                            'country': response.data.data[i].country,
                            'phone': response.data.data[i].phone,
                            'email': response.data.data[i].email,
                            'actions': `<button>Edit</button>`,
                        }
                        cusArr.push(customerArr);
                    }

                    this.customers = cusArr
                }).catch((error)=>{
                    console.log('error', error);
                });
            },

Answer 1

you might be able to use the scoped slot in the component try this:

<b-table>
    <template v-slot:cell(actions)="data">
        <button @click="myAction">Click</button>
    </template>
</b-table>