vue 项目 vuetify 中 table item 按钮展示
此vue项目使用vuetify为ui库,通过插槽slot对table操作!

<template v-slot:item.tag="{ item }">
<!-- {{ item.programme ? item.programme.tagList[0].name : null }} -->
{{ item.tag }}
<v-menu
bottom
offset-y
:close-on-content-click="false"
nudge-bottom="8"
nudge-left="100%"
>
<!-- 标签操作按钮 -->
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
depressed
x-small
color="#6BAFCE"
dark
height="24px"
min-width="24px !important"
class="dep-icon-more"
>
</v-btn>
</template>
<div class="dep-tagMenu">
<!-- v-for="item in item.programme ? item.programme.tagList : 0" -->
<span v-for="item in 8" :key="item.id">
{{ 'item.' }}
</span>
</div>
</v-menu>
</template>
table增加操作列,对每行进行删改查的操作!
<!-- 表格列创建时间 -->
<template v-slot:item.createTime="{ item }">
{{ item.createTime | dateFormat }}
</template>
<!-- 表格列操作 -->
<template v-slot:item.operation="{ item }">
删除
</template>
集思广益,仅供学习,侵权即删!!

浙公网安备 33010602011771号