vue+element作用域插槽

news2024/10/5 18:27:51

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

在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-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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1602654.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java开发指南 | 第十一篇】Java运算符

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 算术运算符关系运算符位运算符逻辑运算符赋值运算符条件运算符&#xff08;?:&#xff09;instanceof 运算符Java运算符优先级 Java运算符包括&#xff1a;算术运算符、关系运算符、位运算符、逻辑运算符、赋值…

C语言入门案例-学生管理系统

要求&#xff1a;学员管理系统可以实现对学员的添加、全部显示、查询、修改、删除功能 完整代码示例&#xff1a; #include <stdio.h> // 定义容量 #define NUM 100//自定义结构体 typedef struct st {char name[30];int age;char sex[10]; }STU;//传入四个初始数据 STU…

PyTorch深度学习入门-2

PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】_哔哩哔哩_bilibili 一、神经网络的基本骨架 --nn.Module Neutral network torch.nn — PyTorch 2.2 documentation * import torch from torch import nnclass xiaofan(nn.Module):…

1997-2022年各省技术市场发展水平数据(原始数据+计算过程+计算结果)

1997-2022年各省技术市场发展水平数据&#xff08;原始数据计算过程计算结果&#xff09; 1、时间&#xff1a;2000-2022年 2、来源&#xff1a;国家统计局、统计年鉴 3、范围&#xff1a;30省 4、指标&#xff1a;技术市场成交额、国内生产总值、技术市场发展水平 5、计算…

Git回滚版本并push到远端master

1、查看日志 git log 2、还原最近的版本 () --git reset --hard commit-id 如&#xff1a;git reset --hard d84da14bf2743683eca7a015f56114faaa344f42 3、覆盖分支版本 git push -f origin dev 回滚本地master完成后&#xff0c;将回滚后的代码push到远端master&#xf…

VIT论文阅读

论文地址&#xff1a;https://arxiv.org/pdf/2010.11929.pdf VIT论文阅读 摘要INTRODUCTION结论RELATEDWORKMETHOD1.VISIONTRANSFORMER(VIT)整体流程消融实验HEAD TYPE AND CLASSTOKENpoisitional embedding 整体过程公式Inductive biasHybrid Architecture 2.FINE-TUNINGANDH…

Nginx第1篇-安装和简单配置

Nginx可以做什么 可以做静态HTTP服务器做负载均衡做正向代理做反向代理 正向代理和反向代理 正向代理&#xff1a; 是一个位于客户端和目标服务器之间的服务器(代理服务器)&#xff0c;为了从目标服务器取得内容&#xff0c;客户端向代理服务器发送一个请求并指定目标&…

Scala 02——Scala OOP

文章目录 Scala 02——Scala OOP前序类1. 类的基本结构2. 普通类和数据类的区别 继承1. extends2. override 抽象类抽象类的特点 单例对象1. 定义2. 场景3. 方法3.1 方法定义3.2 方法调用 特质1. 抽象类和特质的区别2. 强制混入语法3. 静态混入和动态混入 内部类Java和Scala内部…

单链表的应用

文章目录 目录1. 单链表经典算法OJ题目1.1 [移除链表元素](https://leetcode.cn/problems/remove-linked-list-elements/description/)1.2 [链表的中间节点](https://leetcode.cn/problems/middle-of-the-linked-list/description/)1.3 [反转链表](https://leetcode.cn/problem…

【八股】Redisson分布式锁

Redisson分布式锁 主要了解了Redisson分布式锁实现的三个功能&#xff1a; 1.可重入 -> 防止死锁 2.可重试&#xff08;i.e. 非阻塞获取锁&#xff09; 3.自动续约 1. 可重入 原理&#xff1a; 利用Redis的Hash结构&#xff0c;记录了使用当前锁的线程id和重用次数&#…

C++初级----list(STL)

1、 list介绍 1.1、 list介绍 1.list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 1. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向 其前一…

git 分支-变基

在git中&#xff0c;将一个分支的更改集成到另一个分支有两种主要方式&#xff1a;合并&#xff08;merge&#xff09;和变基&#xff08;rebase&#xff09;。在本节中&#xff0c;将学习什么是变基&#xff0c;如何执行变基操作&#xff0c;为什么它是一个非常强大的工具&…

Web 题记

[极客大挑战 2019]LoveSQL 看到这种就肯定先想到万能密码&#xff0c;试试&#xff0c;得到了用户名和密码 总结了一些万能密码&#xff1a; or 11 oror admin admin-- admin or 44-- admin or 11-- admin888 "or "a""a admin or 22# a having 11# a havin…

vue2知识点1 ———— (vue指令,vue的响应式基础)

vue2的知识点&#xff0c;更多前端知识在主页&#xff0c;还有其他知识会持续更新 Vue 指令 Vue指令是Vue.js中的一个重要概念&#xff0c;用于向DOM元素添加特定行为或功能。Vue指令以v-开头&#xff0c;例如v-bind、v-if、v-for等。 v-bind 动态绑定属性 用法&#xff1a…

Linux sort/uniq/wc

文章目录 1. sort 排序将线程ID从大到小排序 2.uniq 临近去重3.wc word cnt 统计 1. sort 排序 将线程ID从大到小排序 grep -v是反向筛选&#xff0c;利用USER&#xff0c;排除掉首行 awk是打印第1 2列 sort -n是代码以数值大小做排序&#xff0c;不加的话会以字符排序。 -k是…

数通HCIE考试分享:考前心态很重要,心情放松好过一次练习

誉天数通HCIE晚班火热预约中&#xff01;真机实验考前辅导备考资料&#xff0c;名师保驾护航&#xff0c;助你稳定通关&#xff01;识别二维码&#xff0c;即可获取免费试听名额&#xff01; 备考阶段 我是去年10月底完成了笔试考试&#xff0c;在笔试之前就将PY的课程过了一遍…

白话transformer(六)编码器与解码器

B 站视频&#xff1a;https://www.bilibili.com/video/BV1fE421T7tR/?vd_source9e18a9285284a1fa191d507ae548fa01 白话transformer&#xff08;六&#xff09; 1、前言 今天我们将探讨Transformer模型中的两个核心组件&#xff1a;编码器和解码器。我们将通过一个具体的任务…

【数据分析】AHP层次分析法

博主总结&#xff1a;根据每个方案x各准则因素权重累加结果 对比来选择目标。数据主观性强 简介 AHP层次分析法是一种解决多目标复杂问题的定性和定量相结合进行计算决策权重的研究方法。该方法将定量分析与定性分析结合起来&#xff0c;用决策者的经验判断各衡量目标之间能…

微软开源 WizardLM-2,70B优于GPT4-0613,7B持平阿里最新的Qwen1.5-32B

当地时间4月15号&#xff0c;微软发布了新一代大语言模型 WizardLM-2&#xff0c;新家族包括三个尖端型号:WizardLM-2 8x22B, WizardLM-2 70B&#xff0c;和WizardLM-2 7B&#xff0c;作为下一代最先进的大型语言模型&#xff0c;它在复杂聊天、多语言、推理和代理方面的性能有…

为什么还有人再问鸿蒙开发有必要学吗?

前言 学习鸿蒙开发&#xff0c;这事儿真的挺有必要的。鸿蒙操作系统&#xff0c;它厉害就厉害在高性能、可扩展&#xff0c;还特智能。现在智能设备和物联网火得不行&#xff0c;鸿蒙就是要成为这个时代的领头羊。它可不是来跟安卓抢饭碗的&#xff0c;它的眼光可远了&#xf…