新手vue+element-ui笔记

el-table 表格输出

table的唯一key值要加，不然会导致表格渲染的数据有问题。

//假设是这种数据格式
myDatas:{
    id:"001",
    name:"whatever",
    time:"2023-03-07"
}

<el-table v-loading="loading" :data="myDatas"  key="whatever">
    <el-table-column label="订单编号" prop="id" min-width="110px" />
    <el-table-column label="订单编号" prop="name" min-width="110px" />
    <el-table-column label="订单编号" prop="time" min-width="110px" />
    <el-table-column label="操作" align="right" min-width="150px">
        <template slot-scope="{ row }"> 
            <el-button @click="onQueryDetails(row,'detail')">查看详情</el-button>
          </template>
    </el-table-column>
</el-table>

如果不是直接输出，就要用插槽包裹才能拿到myDatas里面的数据,row是表格中的一行数据。

<template slot-scope="{ row }"></template>

el-upload 照片墙上传

前言：上传图片的要素如下

必须要有的参数
action	必填	图片上传的服务器地址
headers	必填	token
file-list	必填	图片列表
list-type	必填	"picture-card"就是这种照片墙的意思
limit	选填	限制最多可传多少张
事件
on-change
on-success
on-remove
校验
prop
rules		required必填，message提示语，trigge:'变化时'
其他——看自己情况，自由发挥。
<i slot="default" class="iconfont icon-plus"></i>

如果需要校验必填

//假设：数据结构是这种的，
Datas:[
    {        
        id:"",
        title:"",
        images:"",
    },{        
        id:"",
        title:"",
        images:"",    
    }
]
如果是上传多组图片，此时的拼接方式:prop="'group.' + index + '.images'"

//请根据自己的情况替换
 export default {
   name: 'Upload',  
   data() { 
     return { 
            //这个url是写在环境变量里面的
          uploadUrl: `${process.env.VUE_APP_PY_BASE_API}/update_image/`,
            //像接口发送请求的时候要带的token
          uploadHeaders: { Authorization: 'JWT ' + getToken() }, 
            
        }
    }
}

//直接上传图片的时候是这样累加，每上传一个都是新的。
handleSuccess(response,file,dataindex) {
    console.log("上传成功",response,file,dataindex)    
    //你可以再做其他操作（例如收集你已上传的url地址，提交给接口），我没有列
    ····
},
handleRemove(file,fileList,dataindex) { 
    //点删除不代表你的文件列表里面也被删除了，所以找到那张图片，把fileList中的那张也删掉。
    this.Datas[dataindex].images = fileList.map((item)=>{ 
        //请注意这个地方，如果不是这种格式它就会报没有id的错
      return {"url":item.url}
    })     
},




/*
修改和添加图片的时候呢，就是有你之前上传的图片要保留（接口返回给你的可能只是个url），本次上传
的图片就是上传时候的那些步骤，格式和你的不一样，所以这中间需要做处理。
*/
 handleChange(response,fileList,dataindex) {
    if(response.status == "success"){ 
      this.Datas[dataindex].images = fileList.map((item,index)=>{   
        if(index == fileList.length - 1 && index > 0){
          return item.response.data.img_url
        }else{
          return item.url            
        }             
      }) 
    }
 },
handleRemove(file,fileList,dataindex) { 
   // 在这种情况下删除就可以直接删除，
    this.Datas[dataindex].images = fileList.map((item)=>item.url) 
},

<template v-for="(group,index) in Datas">
    <el-form-item  
      :prop="'group.' + index + '.images'"
      :rules="[{ required: true, message: '产品图片至少1张图', trigger: 'change'}]"
      >
      <el-upload
        class="product-uploader" 
        list-type="picture-card"
        :headers="uploadHeaders"
        :action="uploadUrl"
        multiple
        :limit="9" 
        :file-list="handleImageArry(group.images)"
    
        :on-change="(file, fileList) => handleChange(file, fileList,index)"
        :on-success="(response,fileList) => handleSuccess(response,fileList,index)"
        :on-remove="(file,fileList)=>handleRemove(file,fileList,index)"
        
        >
          <i slot="default" class="iconfont icon-plus"></i>
      </el-upload>
  </el-form-item>
</template>