vue+element作用域插槽

作用域插槽的样式由父组件决定,内容却由子组件控制。

el-table使用作用域插槽

<el-table>
  <el-table-column 
	slot-scope=" { row, column, $index }">
  </el-table-column>
</el-table>

el-tree使用作用域插槽

<el-tree>
  <span class="custom-tree-node" slot-scope="{ node, data }">
</el-tree>
html 复制代码
<el-table style="width: 100%" border :data="list">
  <el-table-column type="index" label="序号" width="80px" align="center">
  </el-table-column>
  <el-table-column prop="tmName" label="品牌名称" width="width">
  </el-table-column>
  <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
    <template slot-scope="{ row, $index }">
      <img :src="row.logoUrl" alt="" style="width: 100px; height: 100px" />
    </template>
  </el-table-column>
  <el-table-column prop="prop" label="操作" width="width">
    <template slot-scope="{ row, $index }">
      <el-button
        type="warning"
        icon="el-icon-edit"
        size="mini"
        @click="updateTradeMark(row)"
        >修改</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
        @click="deleteTradeMark(row)"
        >删除</el-button
      >
    </template>
  </el-table-column>
</el-table>
相关推荐
风尚云网20 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020423 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing25 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月28 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆35 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China36 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q37 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海38 分钟前
Chrome离线安装包下载
前端·chrome
endingCode42 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m51271 小时前
LinuxC语言
java·服务器·前端