zoukankan      html  css  js  c++  java
  • 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>      
    

      

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    ConcurrentHashMap源码阅读
    java中Scanner类nextLine()和next()的区别和使用方法
    setuid
    lsattr
    设置umask
    touch
    od
    vi 搜索
    nl
    cat 参数
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13451901.html
Copyright © 2011-2022 走看看