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>      

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM