Vue增删改查+图片上传+分页

  //    批量删除
  disabled: true,
  //    表格假数据
  tableData: [
    {
      comc_no: 2, // 商品分类编号
      comc_name: "香蕉", //商品分类名称
      comc_pno: "1", //商品分类上级编号
      comc_desc: "122324@qq.com", //商品分类描述
      comc_img: "../../assets/logo.png", //商品分类图片
      comc_lower: 10, //下架商品数量
      comc_upper: 20 //上架商品数量
    }
  ],
  multipleSelection: []
};

},
methods: {
//提交信息
submit() {
this.dialogTableVisible = false;
console.log(this.val);
},
// 图片上传
handleAvatarSuccess(res, file) {
console.log("mfoiejfoelfm");
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this. $message.error("上传头像图片只能是 JPG 格式!"); } if (!isLt2M) { this.$ message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
}, //弹出框数据
handleChange(value) {
console.log(value);
},
// 分页获取数据
shuju() {
this. $axios .post( "/api/sale/queryComc.do", { page: this.currentPage, limit: this.pageSize }, { // 设置请求头 headers: { "Content-Type": "application/json" } } ) .then(response => { console.log(response); this.tableData = response.data.data; this.count = response.data.count; // console.log(typeof response.data) // this.count = response.data.data // console.log(this.count) }) .catch(err => { console.log(err); }); }, // 每页显示条数 handleSizeChange(val) { this.pageSize = val; this.shuju(); }, // 分页 handleCurrentChange(pag) { console.log(pag); this.currentPage = pag; this.shuju(); }, // 查询 query() { for (var i = 0; i < this.tableData.length; i++) { if (this.tableData[i].comc_name.indexOf(this.stan_name) >= 0) { this.tableDatap.push(this.tableData[i]); } else { this.$ message("没有数据");
}
}
},
// 修改table header的背景色
tableHeaderColor({ rowIndex }) {
if (rowIndex === 0) {
return "background-color: #90ADE5;color: #fff;font-weight:500;height:60px";
}
},

// 批量删除
batchBelete() {
  for (var i = 0; this.multipleSelection.length; i++) {
    console.log(12334566);
    console.log(this.multipleSelection[i]);

    this.tableData.splice(this.multipleSelection[i], 1);
    this.$message("删除成功");
    this.disabled = true;
  }
},
// 表格复选框
handleSelectionChange(val) {
  this.disabled = false;
  this.multipleSelection = val;
  console.log(val);
},
// 修改
Modify(val) {
  console.log(val);
  this.dialogTableVisible = true;
  // this.options=val
  this.val = val.comc_pno;
  this.text = val.comc_name;
  this.maosu = val.comc_desc;
  this.imageUrl = val.comc_img;
  console.log(this.val);
},
// 删除
Delete(val) {
  this.tableData.splice(val, 1);
  if (this.tableData.length == 0) {
    this.count = 0;
  }
}

},
mounted: function() {
// 请求数据
this.$axios
.post(
"/api/sale/queryComc.do",
{
page: this.currentPage,
pageSize: this.pageSize
},
{
// 设置请求头
headers: {
"Content-Type": "application/json"
}
}
)
.then(response => {
console.log(response.data.data.list);
this.tableData = response.data.data;
this.count = response.data.data.count;
})
.catch(err => {
console.log(err);
});
}
};
</script>

.bg {
background-color: ghostwhite;
margin: 0;
padding: 10px;
height: 1200px;
}

.input {
width: 200px;
margin-right: 50px;
}

.margin {
margin-top: 20px;
margin-bottom: 20px;
}
</style>