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>      

  

 

posted @ 2020-08-07 11:53  胡炖鱼  阅读(1535)  评论(0编辑  收藏  举报