当前位置: 首页 > news >正文

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>

 

 

<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-buttontype="warning"icon="el-icon-edit"size="mini"@click="updateTradeMark(row)">修改</el-button><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="deleteTradeMark(row)">删除</el-button></template></el-table-column>
</el-table>

 

http://www.lryc.cn/news/340767.html

相关文章:

  • MUSA模型
  • avicat连接异常,错误编号2059-authentication plugin…
  • 阿里云云效CI/CD配置
  • 个人开发者,Spring Boot 项目如何部署
  • 【Spring进阶系列丨第九篇】基于XML的面向切面编程(AOP)详解
  • 学习记录:转发和重定向
  • 实现(图像、视频等)数据上云存储
  • LeetCode 454.四数相加II
  • GoogleNet网络训练集和测试集搭建
  • 将数字状态码在后台转换为中文状态
  • 2017NOIP普及组真题 4. 跳房子
  • 网络与 Internet因特网的基本概念
  • vue-router 中 router-link 与 a 标签的区别
  • MySQL基础知识——MySQL事务
  • 【架构方法论(一)】架构的定义与架构要解决的问题
  • 基于springboot实现人口老龄化社区服务与管理系统项目【项目源码+论文说明】计算机毕业设计
  • 代码随想录算法训练营第三十七天| LeetCode 738.单调递增的数字、总结
  • C++动态内存管理 解剖new/delete详细讲解(operator new,operator delete)
  • python-re正则笔记0.2.0
  • .NET SignalR Redis实时Web应用
  • 【热门话题】常见分类算法解析
  • 有效利用MRP能为中小企业带来什么?
  • InternlM2
  • 2024-12.python高级语法
  • 【C语言】贪吃蛇项目(1) - 部分Win32 API详解 及 贪吃蛇项目思路
  • 秋叶Stable diffusion的创世工具安装-带安装包链接
  • 华为ensp中aaa(3a)实现telnet远程连接认证配置命令
  • 前端网络---http协议和https协议的区别
  • FactoryMethod工厂方法模式详解
  • Java基础-知识点1(面试|学习)