草庐IT

(Table)解决：Element-ui 中＜template slot-scope=“scope“＞ 的用法问题以及剖析 Table 的相关属性

狮子座的男孩 2023-04-20 原文

1、遇到要在 Element-ui 的 Table 中添加图片和序号的问题：

A、想要在Table里面添加的图片或属性情况为：

B、但如何添加就是一个问题：
经过查询发现：通过 slot-scope="scope" 属性操作是可以在 table 栏中添加相关属性值的(相关文档也有叙述);


// 地址：https://element.eleme.cn/#/zh-CN/component/table
// 此时在日期栏下添加了一个图标和date值；
// 即：通过 slot-scope="scope" 来添加相关属性值是可以的；

2、解决方案：用 slot-scope="scope"属性

A、关于 Element-ui 中 'el-table' 的理解：

其一、属性 :data="tableData" 表示是：动态绑定；
在 el-table 中，:data="tableData" 是动态绑定的对象数组，在 Table 中每一个 cell (小格子) 里面显示的数据都是从动态绑定的对象数组中拿到的数据；

其二、el-table-column 来决定 el-table 的列数：
在 <template></template> 里面的 el-table-column 个数来决定 el-table 的列个数，且用 lable 属性来决定列名；

其三、:data="tableData" 中的对象个数决定 el-table 的行数：

在 tableData 对象数组里面的 {对象}个数来决定 el-table 的行个数，且用 el-table-column 中的 prop 属性来将该列的数据与tableData数组所有对象中的相关属性绑定;
可以理解为：tableData[$index].adress 来拿到数据；

// 例如： prop="address" 语句就表示：将该 prop="address" 列的数据与tableData数组所有对象中的address属性绑定;

// prop="address" 所在列：

// 绑定的tableData数组所有对象中的address属性;

B、关于slot-scope="scope"属性的理解：

其一、slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可；


其二、在scope.row.address语句中，row 是 scope 的内置属性，应该还会有column, $index 等内置属性；

我理解为：给 label="地址" 列中的每个 row 中添加 tableData 数组所有对象中的 address 属性;

其三、此时的所占位置的 scope 并不是代表着 table，可以将scope.row理解为一个整体，从而来存放 tableData 所有数组对象中的 address 属性值；

3、通过 slot-scope="scope"实现插入图片的过程：

A、通过引入 slot-scope="scope" 属性的代码：

// template 中的代码展示：
<template>
  <div class="container">
    <el-table
      :data="tableData"
      :height="tabHeight"
      :width="tabWidth"
      class="container-table"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"  width="350"> </el-table-column>
      <el-table-column prop="process" label="">
        <template slot-scope="scope">
          <div
           class="table_right"
           v-for="(iterm, indx) in scope.row.process" 
           :key="indx" 
           style="float: left; color: black"
           >
           <div class="span_bg">
             <span class="table-circle">{{ iterm.order }}</span>
             <span class="t_value"> {{ iterm.name }}</span>
           </div>
           <span class="el-icon-right"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

B、做出来的页面展示(插入的图片及文字)：

4、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

Tablescopespanclasstokenelementuivue.jsjavascriptslot-scope经验分享

有关(Table)解决：Element-ui 中＜template slot-scope=“scope“＞ 的用法问题以及剖析 Table 的相关属性的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  3. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  4. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  5. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  6. ruby - 如何更快地解决 project euler #21？ - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  7. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗？ - 2

    我正在学习Ruby，遇到了inject。我正处于理解它的风口浪尖，但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和，我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么？我正在学习，所以我可以继续使用Rails，但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  8. ruby - 为什么这些方法没有解决？ - 2

    这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes

  9. ruby - 使用法拉第上传文件 - 2

    我在尝试使用Faraday将文件上传到网络服务时遇到问题。我的代码:conn=Faraday.new('http://myapi')do|f|f.request:multipartendpayload={:file=>Faraday::UploadIO.new('...','image/jpeg')}conn.post('/',payload)尝试发布后似乎没有任何反应。当我检查响应时this是我所看到的:#:post,:body=>#,#,@opts={}>,#],@index=0>>,#>],@ios=[#,#,@opts={}>,#],@index=0>,#],@index=0>

  10. ruby - rspec: raise_error 用法来匹配错误信息 - 2

    我使用raise(ConfigurationError.new(msg))引发错误我试着用rspec测试一下:expect{Base.configuration.username}.toraise_error(ConfigurationError,message)但这行不通。我该如何测试呢？目标是匹配message。 最佳答案 您可以使用正则表达式匹配错误消息:it{expect{Foo.bar}.toraise_error(NoMethodError,/private/)}这将检查NoMethodError是否由privateme

随机推荐