先声明:本人为前端初学者,对于底层逻辑基本不懂,目前处于依葫芦画瓢的阶段,在此仅记录自己开发阶段遇到的问题及自己的解决方式,如有错误请各位大佬指正。
关于动态加载列已经有很多文章,故不赘述。
动态加载列
el-table的列中:
<el-table :data="dataList">
<el-table-column v-for="(item, index) in dynamicColumns" :key="item.prop" :prop="item.prop" align="center">
<template slot="header">
{{item.label}}
</template>
</el-table-column>
</el-table>
注意这里:key="item.prop"
的写法,这里需要保证key
的唯一性,不然会导致表头不改变的问题,如写成:key="index"
的话,当第一次加载了三个数据,第二次加载了四个数据时,因为前三个的index是相同的,所以前三个的表头不会变。
dynamicColumns是动态的属性列表,js中的加载方式如下:
// data是从后端返回过来的数据
this.dynamicColumns.push({prop: data[i].name, label: data[i].name});
this.dynamicColumns的形式则相当于:
// 举个例子
this.dynamicColumns = [
{
prop: name1,
label: name1,
},
{
prop: name2,
label: name2,
},
]
这样就能够根据数据内容动态加载了,当然根据自己需要可以进行修改。
根据动态加载列的内容显示对应图片
这个时候就要提到:data="dataList"
中数据源格式:
this.dataList= [
{
property1: property1, // 属性1
property2: property2, // 属性2
address: [], // 图片地址列表
},
{
property2: property2, // 属性2
property3: property3, //属性3
address: [], // 图片地址列表
},
]
其中address的长度为所有出现过的属性的长度,即表头的长度,也就是:this.dynamicColumns.length = this.dataList.length
这样的话,根据表头的顺序来遍历并放置图片地址:
// 遍历全部的对象行
for(let i = 0; i < this.dataList.length; i ++ ){
// 遍历全部的动态表头
for(let j = 0; j < this.dynamicColumns.length; j ++ ){
// 如果当期的对象行存在这个属性的话,就加入其图片地址
if(this.dataList[i].hasOwnProperty(this.dynamicColumns[j].prop)){
this.dataList[i].address.push(当前属性对应的图片); // 设置图片路径
}
else this.dataList[i].address.push(空图片);
}
}
上述代码可以理解为:
遍历到数据列表的下标为i
处,动态表头列表的下标为j
处:
(1)若当前数据dataList[i]
中存在属性dynamicColumns[j]
,则将对应的图片地址push
到该数据的dataList[i].address
中
(2)若不存在,则push
一个空图片(或其他),
注意这里不管是否存在一定要填充,不然下标对不上。
最后上表格代码:
<el-table :data="dataList">
<el-table-column v-for="(item, index) in dynamicColumns" :key="item.prop" :prop="item.prop">
<template slot="header">
{{item.label}}
</template>
<template slot-scope="scope">
<el-image style="width: 20px; height: 20px;" :src="scope.row.address[index]"/>
</template>
</el-table-column>
</el-table>
:src="scope.row.address[index]"
这一句,它会将所有的属性对应的下标index都取出来,这时不会判断属性是否存在,而是按照动态表头列表的顺序将address中的值也按顺序取出来(这就是为什么为空的时候也要填充),然后加载我们填入的地址,图片就显示出来。