誉天在线项目~ElementPlus图片回显

组件增加file-list属性

<el-upload action="http://localhost:6070/basic/coursepic" 
list-type="picture-card" 
:file-list="img" 
:on-success="uploadSuccess">

声明图片列表对象

const img = ref([])

新增页面

const toAdd = ()=>{
  dialogVisible.value = true	//展现对话框
  form.data = {
    ...form.data,
    ...formInit		//利于formInit对数据进行初始化
  }

  dynamicTags.value = []  //清空tag
  img.value = []  //清空图片
}

修改页面

const toEdit = (index)=>{
  form.data = {
    ...form.data,
    ...state.tableData[index]		//回显数据
  }

  //回显课程标签:数据库存储字符串,页面是数组。
  dynamicTags.value = form.data.tags.split(",")   //将字符串拆成数组

  img.value = []    //先清空在回显
  img.value.push({
    url: '../../upload/'+form.data.pic
  })

  dialogVisible.value = true	//展现对话框
  dialogType.value = 'edit'	//修改
}

你可能感兴趣的:(front-end,大前端,vue,ElementPlus)