el-table template slot-scope=“scope“ 不显示内容

于 2024-07-16 15:22:19 发布
阅读量442 收藏
点赞数 1
分类专栏： VUE实战 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34896766/article/details/140467502
版权

有时候，按以下方法写的el-table的操作列会不显示内容，可用 “template 里面的属性改为 #default="scope"。 重点：【template外围标签el-table-column 加上 key="slot"属性】” 的方法修改。 

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

解决办法代码：

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100"
      key="slot">
      <template #default="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

煸橙干儿~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui//el-table 的 template slot
weixin_37877794的博客
09-08 695
文章目录slot-scope#default slot-scope <template slot-scope="scope">{{scope.row.name}}{{scope.$index}}</template> <el-table-column label="姓名"> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-tab
使用 Element UI Table 的 slot-scope方法
10-16
在 Element UI 中，Table 组件是一个常用的展示数据的组件，它提供了许多自定义功能，其中包括 `slot-scope` 方法。`slot-scope` 在 Vue.js 2.x 版本中用于将子组件的数据传递给父组件，但在 Vue.js 3.x 中已被 `v-...
(Table)解决：Element-ui 中＜template slot-scope=“scope“＞ 的用法问题以及剖析 Table 的相关属性
狮子座的男孩
05-09 3万+
1、遇到要在 Element-ui 的 Table 中添加图片和序号的问题： A、想要在Table里面添加的图片或属性情况为： B、但如何添加就是一个问题： 经过查询发现：通过 slot-scope="scope" 属性操作是可以在 table 栏中添加相关属性值的(相关文档也有叙述); // 此时在日期栏下添加了一个图标和date值； //即：通过 slot-scope="scope" 来添加相关属性值是可以的； 2、解决方案：用 slot-scope="scope"属性 A、关于slot-sco
前端el-table-column使用template的新发现哈哈哈
m0_60594323的博客
06-01 1275
在 Vue 和 Element UI 中，不能在同一个 el-table-column 中直接放置多个 template 标签，除非每个 template 标签都使用了不同的具名插槽。通过使用具名插槽（slot）区分它们
slot插槽及Element-ui 中＜template slot-scope=“scope“＞
m0_63005501的博客
12-02 8645
slot多种插槽及Element-ui 中＜template slot-scope=“scope“＞
Vue提升：理解vue中的 slot-scope=“scope“
qq_51066068的博客
08-12 8595
​ slot是插槽，slot-scope=“scope“语义更加明确，相当于一行的数据，在实际开发中会碰到如下的场景
＜template slot-scope=“scope“＞ 和＜template slot-scope=“{row }“＞什么区别
2301_76588608的博客
03-19 1258
另外，可以通过解构赋值语法个性化地从 `scope` 对象中抽取所需的属性，如在 `<template slot-scope="{ row, $index }">` 中，只提取了 `row` 和 `$index` 两个属性。在 Vue.js 的组件中，特别是在使用作用域插槽（Scoped Slots）时，`scope` 对象包含了父组件传递给子组件插槽的上下文数据。具体包含哪些属性，需要查阅对应组件的官方文档或查看组件内部是如何定义和传递 `scope` 数据的。- `row`: 当前行的数据对象。
vue el-table实现行内编辑功能
10-15
<template slot="header" slot-scope="scope"> <el-button v-model="handleAdd" size="mini" type="success" round plain @click="handleAdd(scope.$index, scope.row)">{{ $t('common.add') }}</el-button> </...
vue el-table实现自定义表头
10-15
在这个例子中，el-table-column的默认插槽（slot）被设置为header，并通过slot-scope接收到了一个scope参数。scope参数包含了行索引（$index）和行数据（row），基于这些信息，可以在表头中放置一个按钮，并为其绑定...
vue+element获取el-table某行的下标,根据下标操作数组对象方式
10-14
<template slot-scope="scope"> <el-button type="text" @click="handleEdit(scope.$index)">编辑</el-button> <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button> </template> </...
el-table组件插槽“slot-scope”
qq_50276105的博客
07-19 1769
1、返回的数据checklistList（数组）当中，每行都不含字段ispass和value时，往scope.row.value和scope.row.value 中输入值并提交，得到的每行都有ispass和value字段的数组对象。
＜template slot-scope=“scope“＞含义
qq_35227352的博客
03-31 2497
slot-scope=“scope” 的scope是el 生成的一个对象,里面不仅包含了那一行的数据row, 还包含了一些其他有用的属性。 通过scope.row.data，我们就可以读取到每一行中的data。
理解vue之element-ui中的 ＜template slot-scope=“scope“＞
weixin_43833610的博客
11-22 439
添加链接描述
eltable的slot-scope
Wow 五六 !!! 的博客
03-30 828
记录下slot-scope，后续进行系统学习，先打卡记录
Vue + Element-ui Table <template slot-scope="scope">
个人纪录、总结！
07-08 370
Vue + Element-ui Table表格中template的用法： <template slot-scope="scope"> 篇一：https://blog.csdn.net/tg928600774/article/details/81945140
Vue slot-scope=‘scope‘的理解
热门推荐
潇湘子的博客
07-15 4万+
首先要理解几个知识点： 1.插槽 2.作用于插槽 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示 作用域插槽实际上是带有数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里 <w-table-column prop="je" label="总价" width="100"> <template slot-scop
Vue3: el-table表格数据不显示
无面人的博客
11-15 5284
Vue3: el-table表格数据不显示
element ui中 el-table的关于slot-scope
lyclyc_的博客
05-18 162
自己以前写的都是slot-scope scope-row.但是看案例直接是slot-scope row.什么的。
理解vue之element-ui中的 <template slot-scope="scope">
weixin_30802273的博客
10-25 113
https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1 转载于:https://www.cnblogs.com/wanqingcui/p/9848363.html
el-table slot-scope="scope"
最新发布
07-13
在 `el-table` 的行模板 `<template slot-scope="scope">...</template>` 中，你可以像这样访问 `scope` 对象的属性： - `scope.$index`: 当前行的索引 - `scope.row`: 当前行的数据对象 - `scope.$parent`: 上一层...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值