如何解决在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/vue@2.x/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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。