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;
},
}
//`完结`