Vue增刪改查+圖片上傳+分頁

  //    批量刪除
  disabled: true,
  //    表格假數(shù)據
  tableData: [
    {
      comc_no: 2, // 商品分類編號
      comc_name: "香蕉", //商品分類名稱
      comc_pno: "1", //商品分類上級編號
      comc_desc: "122324@qq.com", //商品分類描述
      comc_img: "../../assets/logo.png", //商品分類圖片
      comc_lower: 10, //下架商品數(shù)量
      comc_upper: 20 //上架商品數(shù)量
    }
  ],
  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;
}, //彈出框數(shù)據
handleChange(value) {
console.log(value);
},
// 分頁獲取數(shù)據
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); }); }, // 每頁顯示條數(shù) 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("沒有數(shù)據");
}
}
},
// 修改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() {
// 請求數(shù)據
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>