zoukankan      html  css  js  c++  java
  • <template slot-scope="scope"> 插槽 <div slot="reference"></div>

    个人理解插槽区别

     <template slot-scope="scope"> 在vue项目里面可以用,拿到的当面行后台返回的所有数据

    例如:

    <el-table-column fixed="right" label="操作" width="120">

       <template slot-scope="scope">

         <div> {{scope.row}} </div>  //可以拿到当前行,所有后台返回的数据

      </template>

    </el-table-column>

     <div slot="reference"></div>  前端用页面的一部分替换页面的另一部分

      例如:

     <td  width=35%>
                    <div v-if="item.ext=='png' || item.ext=='jpg'"> 
                              <el-popover
                                  placement="right"
                                  width="400"
                                  trigger="click">
                                  <img :src="item.url"/>  //替换项
                                   <div slot="reference">
                                      <img  :src="item.url" style="100px;height:50px; cursor:pointer" />   //被替换
                                   </div>                 
                            </el-popover>
                    </div>
                    <div v-else><a :href=item.url download="">{{item.fileName}}</a></div>
     </td>

     

  • 相关阅读:
    asp.net core 使用 StaticFiles 中间件 (不完整翻译)
    asp.net core 通过 TeamCity 实现持续集成笔记
    Swashbuckle for asp.net core 配置说明
    # TypeScript 中如何确保 this 的正确性
    MySql + EF6 + .Net Core
    ASP.NET Core + EF6
    数据库设计 Assignment 02
    NYOJ 8 一种排序
    NYOJ 23.取石子(一)
    邻接表(C++)
  • 原文地址:https://www.cnblogs.com/maibao666/p/12971391.html
Copyright © 2011-2022 走看看