1. 程式人生 > 實用技巧 >vue 專案 vuetify 中 table item 按鈕展示

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>