IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 解决:Element-ui 中<template slot-scope=“scope“> 的用法问题以及剖析 Table 的相关属性 -> 正文阅读

[JavaScript知识库]解决:Element-ui 中<template slot-scope=“scope“> 的用法问题以及剖析 Table 的相关属性

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语句中rowscope 的内置属性,应该还会有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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-10 11:48:02  更:2022-05-10 11:48:21 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 17:17:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码