el-table动态加载列且根据内容显示图片

先声明：本人为前端初学者，对于底层逻辑基本不懂，目前处于依葫芦画瓢的阶段，在此仅记录自己开发阶段遇到的问题及自己的解决方式，如有错误请各位大佬指正。
关于动态加载列已经有很多文章，故不赘述。

动态加载列

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中的值也按顺序取出来（这就是为什么为空的时候也要填充），然后加载我们填入的地址，图片就显示出来。