4.20

上传文件

<el-upload
  class="upload-demo"
  action="具体地址"
  :headers="headers"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-success="successfn"
  :on-progress="progressfn"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

    export default {
   data() {
      return {
        headers:{
          Authorization : localStorage.token
        },
        fileList: []
      };
    },

methods: {
  /* 上传过程中执行的函数 */
  progressfn(event, file, fileList){
    console.log(event, file, fileList);
  },
  /* 上传文件成功的调用 上传多个文件 每个上传成功了都会调用一次*/
  successfn(response, file, fileList){

    console.log(response, file, fileList);
  },
   /* 点击删除文件的时候触发 */
  handleRemove(file, fileList) {
    console.log(file, fileList);
  },
  /* 点击已上传的图片，预览的时候调用 */
  handlePreview(file) {
    console.log(file);
  },
  handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  },
  beforeRemove(file) {
    let flag= this.$confirm(`确定移除 ${ file.name }?`);
    return flag
  }
}

删除

<template>
  <div>
    <h1>GoodsView</h1>
     <el-button type="danger" plain @click="del">删除</el-button>
    <!-- 提示框的颜色有 -->
    <el-table
      :data="tableData"
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
       <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column prop="add_time" label="添加时间" width="280" ></el-table-column>
      <el-table-column prop="goods_id" label="商品id" width="280"> 
         <template slot-scope="scope">
        <el-tag
          >{{scope.row.goods_id}}</el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="500">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="380">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { goodsGet,delPost } from "@/http/request.js";
/* import { delPost } from "@/http/request.js"; */
export default {
  data() {
    return {
      pagenum: 1,
      pagesize: 10,
      query: "",
      tableData:[],
      /* 勾选的数据在这个数组里面 */
       multipleSelection: [],
    };
  },
  methods:{
   handleSelectionChange(val){
     this.multipleSelection = val;

   },
   /* 批量删除 */
   del(){
     this.$confirm('')

     console.log(delPost);
     console.log(this.multipleSelection)
     .then(()=>{
       this.multipleSelection.forEach((r,i)=>{
       delPost(`goods/${r.goods_id}`)
       .then(res=>{
         let {meta} = res.data;
        if(meta.status==200&&(i+1)==this.multipleSelection.length){
          this.$message.success(meta.msg)
         this.showTable();
        }

       })
     })
     })
     .catch(()=>{
       this.$message.warning('不删除了')
     })
   },
   showTable(){
         goodsGet("goods", {
      pagenum: this.pagenum,
      pagesize: this.pagesize,
      query: this.query,
    })
    .then((res)=>{
      console.log(res);
      let {meta,data} = res.data;
      if(meta.status==200){
        this.tableData = data.goods
      }
    })
   }
  },
  created() {
    this.showTable();
  },
};
</script>

<style>
</style>