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

Posted 2023-02-22

【中文标题】如何在数据表的每一行添加按钮？

【英文标题】：How to add buttons in each row of data table?

【发布时间】：2021-01-16 12:55:45

【问题描述】：

我正在使用主题 DataTable。我想在每一行中添加带有可点击事件的编辑或删除按钮，以获取客户 ID 以供将来操作。我没有得到任何添加按钮的解决方案。我想要操作列中的按钮。我尝试使用 html 中的按钮制作客户的自定义对象，但它在操作列中显示 html 而不是制作按钮。

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>
```

脚本：

 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;
        

这是我到目前为止所尝试的。

     
     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);
                );
            ,

【问题讨论】：

我假设数据表插件不支持 v-html 指令，因此在这种情况下，您将无法在组件内创建任何 html 元素。如果您可以链接文档可能会有所帮助

@JustinDuncan 我发布了我尝试过的代码，但它在操作列中打印了 html。

【参考方案1】：

您也许可以在组件中使用作用域插槽试试这个：

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