(Table)解决:Element-ui 中<template slot-scope=“scope“> 的用法问题以及剖析 Table 的相关属性
原文链接:https://blog.csdn.net/weixin_43405300/article/details/124655802
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
B、做出来的页面展示(插入的图片及文字):
4、小结:
其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482