iview Table查看大图

vue iview Table插入图片

iview表格图片点击查看大图

	<Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
	    <img :src="imgUrl"  style="width: 100%">
	</Modal>

data(){
	return{
	src:'',   //没有图片的时候显示
	visible:false,   //查看大图弹窗
	imgUrl:'',   //大图的路径
	column:[
			{
				key:'dance_name',
				title:'名称',
				align: 'center'
			},
			{
				title:'图标',
				align: 'center',
				render: (h, params) =>{
					return h('img',{
						attrs:{
							src:params.row.dance_img,
							onerror:'this.src="https://goss.veer.com/creative/vcg/veer/800water/veer-133632476.jpg"'
						},
						style:{
							width:'42px',
							verticalAlign:'middle',
							cursor:'pointer'
						},
						on:{
							click:(e)=>{
								let _this=this;
								_this.handleView(e.srcElement.currentSrc)  //点击查看大图
							}
						}
					})
				}
			},
			{
				key:'describle',
				title:'舞种描述',
				align: 'center'
			},
			{
				title:'操作',
				align: 'center',
				render: (h, params) =>{
					return h('div',[
						h('span',{
							style:{
								color:'#1890ff',
								cursor:'pointer'
							},
							on:{
								click:()=>{
									let _this=this
									_this.dance_img={}
									_this.num=params.index
									_this.title=params.row.dance_name
									_this.introduction=params.row.describle
									_this.dance_img.resource_url=params.row.dance_img
									_this.show=true
								}
							}
						},'编辑'),
						h('span',{
							style:{
								color:'#1890ff',
								cursor:'pointer',
								marginLeft:'15px'
							},
							on:{
								click:()=>{
									let _this=this;
									_this.$confirm(`您确定要删除${params.row.dance_name}吗?`, '提示', {
							          	confirmButtonText: '确定',
							          	cancelButtonText: '取消',
							          	type: 'warning'
							        }).then(() => {
							        	_this.$axios.post('manage/delDance',{danceId:params.row.id}).then( res =>{
							        		if( res.data.code == 200){
							        			_this.$Message.success('删除成功')
							        			_this.list()
							        		}
							        		else{
							        			_this.$Message.error(res.data.message)
							        		}
							        	}).catch( error =>{
							        		console.log(error)
							        	})
							        }).catch(() => {         
							        });
								}
							}
						},'删除')
					])
				}
			}
		]
	}
}

methods:{
	//查看大图
	handleView(url) {
		let _this=this
	    _this.imgUrl = url;
	    _this.visible = true;
	},
}
	//`完结`