在Vuejs中将按钮作为表列标题传递

问题描述

我想使表格的列标题之一成为可单击的按钮。像这样通过数组从父级接收列。如您所见，我想将按钮作为最后一个标题。

<BaseTable
        :columns="table.columns"
</BaseTable>
.
.
.
    table: {
       columns: [
          {
            title: "Role",},{
            title: "No."
          },{
            title: "Milestone"
          },{
            title: "Status"
          },{
            title: "Condition"
          },{
            title:
              '<button >+ View all</button>',}
        ]
    }

然后表组件将其作为道具接收并像这样显示它：

         <tr>
            <th>
                {{ column.title }}
            </th>
          </tr>

因此最终产品应如下所示：

我该怎么做？

解决方法

怎么做这样的事情？

df.to_csv(r'Path where you want to store the exported CSV file\File Name.csv',index = False)

现在在您的columns数组中，使最后一个对象看起来像这样：

    <th>
      <button v-if="column.isBtn">{{column.title}}</button>
      <template v-else>{{column.title}}</template>
    </th>

所以我所做的只是向表标题列添加按钮，并且仅当我在列对象中传递值为true的isBtn时显示它

希望此代码可以为您提供帮助。

,

我建议使用scoped slots来自定义该单元格的呈现方式：

Vue.component('BaseTable',{

  props: ['columns','data'],template: `<table>
<thead>
  <tr >
    <th v-for="(col,i) in columns" :key="i">
     <template  v-if="col.key && $scopedSlots[col.key]" >
        <slot :name="col.key" :column="col"></slot>
     </template>
     <template v-else>
         {{col.title}}
     </template>
    </th> 
       
  </tr>
</thead>
</table>`

})


var app = new Vue({
  el: '#app',data: {
    employees: [{
        "id": "1","employee_name": "Tiger Nixon","employee_salary": "320800","employee_age": "61","profile_image": ""
      },{
        "id": "2","employee_name": "Garrett Winters","employee_salary": "170750","employee_age": "63",{
        "id": "3","employee_name": "Ashton Cox","employee_salary": "86000","employee_age": "66",{
        "id": "4","employee_name": "Cedric Kelly","employee_salary": "433060","employee_age": "22",{
        "id": "5","employee_name": "Airi Satou","employee_salary": "162700","employee_age": "33",{
        "id": "6","employee_name": "Brielle Williamson","employee_salary": "372000","profile_image": ""
      }
    ],columns: [{
        title: 'ID',},{
        title: 'employee name',{
        title: 'employee salary',{
        title: 'employee age',{
        title: 'View All',key: 'viewall'
      },]
  },})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<div id="app">
  <base-table :columns="columns">
    <template v-slot:viewall="{col}">
        <button class="btn btn-primary">+View All</button>
     </template>
  </base-table>
</div>