1.Vue-Lazyload懒加载
npm地址:https://www.npmjs.com/package/vue-lazyload
render渲染:
<!-- home.vue -->
<template>
<Table height="520" :columns="columns" :data="tableData"></Table>
</tamplate>
<script>
export default {
name: 'home',
data () {
return {
tableData: [],
columns: [
{
title: '封面',
key: 'img',
width: 150,
render: (h, params) => {
return h('img', {
// domProps: {
// 'src': params.row.fengmian
// },
attrs: {
'data-src': params.row.fengmian, **// 划重点**
'src': params.row.fengmian, **// 划重点**
'lazy': 'loaded' **// 划重点**
},
style: {
width: '60px',
height: '60px',
margin: '5px'
}
})
}
}
]
}
}
}
</script>