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