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