使用elment批量删除
<template>
<div>
<h1>goods</h1>
<el-button type="danger" plain @click="del">批量删除</el-button>
<!-- 提示框的颜色 有light和dark -->
<!-- selection-change 勾选的时候触发的函数 -->
<el-table
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:row-key="row=>row.goods_id"
>
<!-- type="selection"表示一个勾选框 -->
<el-table-column
type="selection" width="55"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
prop="add_time"
label="添加时间"
width="120"
></el-table-column>
<el-table-column prop="goods_id" label="商品id" width="120">
<!-- 使用作用域插槽加上tag标签框 -->
<template slot-scope="scope">
<el-tag>{{ scope.row.goods_id }}</el-tag>
</template>
</el-table-column>
<!-- show-overflow-tooltip 当数字超出长度 鼠标移上去显示提示框 -->
<el-table-column
prop="goods_name"
label="商品名称"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="goods_number" label="商品数量" width="120">
</el-table-column>
<el-table-column prop="goods_price" label="商品价格" width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { menusGet, delDelete } from "@/http/request.js";
export default {
activated() {
console.log("商品列表激活了");
},
deactivated() {
console.log("离开了商品列表");
},
data() {
return {
pagenum: 1,
pagesize: 10,
query: "",
tableData: [],
/* 勾选的数据放在整个数组里面 */
multipleSelection: [],
};
},
methods: {
/* 勾选的时候触发 里面的形参就是 勾选的数据 会组合成一个数组 */
handleSelectionChange(val) {
this.multipleSelection = val;
},
/* 批量删除 */
del() {
console.log(delDelete);
this.$confirm('您确定要删除吗？')
/* 点击确定走then */
.then(()=>{
this.multipleSelection.forEach((r,i) => {
console.log(r.goods_id)
delDelete(`goods/${r.goods_id}`,{
id:r.goods_id
}).then((res) => {
let {meta} = res.data;
/* 状态200表示请求成功，最后一个循环执行的时候再给提示 */
if(meta.status==200&&(i+1)==this.multipleSelection.length){
this.$message.success(meta.msg)
/* 删除数据后，重新渲染页面 */
this.showTable();
}
});
});
})
/* 点击取消走catch */
.catch(()=>{
this.$message.warning('谢谢你的手下留情')
})
},
showTable() {
menusGet("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;
}
})
.catch((err) => {
console.log(err);
});
},
},
created() {
this.showTable();
},
};
</script>
<style>
</style>
复制代码
使用ement上传文件
<template>
<div>
<h1>categories</h1>
<!-- v-loading="loading" 加载中的指令 -->
<!-- action 后台的接口地址 -->
<!-- :headers="headers" 后端的接口需要的请求头 -->
<!-- :on-preview="handlePreview" 点击预览的时候触发的函数 -->
<!-- :on-remove="handleRemove" 点击删除的时候触发的函数 -->
<!-- before-remove="beforeRemove" 删除之前执行的函数（confirm提示框） -->
<!-- :on-success="successfn" 上传成功的时候触发的函数 -->
<!-- :on-error="errorfn" 上传失败的时候触发的函数 一般是接口出现问题的时候触发-->
<!-- :on-progress="progressfn" 上传过程中触发的函数 一般是出现loading -->
<!-- multiple是否允许多选 -->
<!-- :limit="3" 显示只能上传3个文件 -->
<!-- :on-exceed="handleExceed" 超出限制的时候执行的函数 -->
<el-upload
v-loading="loading"
action="https://lianghj.top:8888/api/private/v1/upload"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="successfn"
:on-error="errorfn"
:on-progress="progressfn"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
/* 需要设置请求头 */
headers:{
Authorization:localStorage.token
},
/* 为v-loading指令设置默认的loading状态 */
loading:false
};
},
methods: {
/* 上传过程中执行的函数 */
progressfn(event, file, fileList){
console.log(event, file, fileList)
/* 打开loading */
this.loading = true;
},
errorfn(err, file, fileList){
console.log(err, file, fileList)
/* 关闭loading */
this.loading = false;
},
/* 上传文件成功的时候调用 上传多个文件 每个上传成功了都会调用一次*/
successfn(response, file, fileList){
/* response是后台返回的结果 */
/* file是当个文件对象 */
/* fileList是上传多个文件的数组集合 */
console.log(response, file, fileList)
let {meta} = response;
/* 状态为200 给个成功提示 */
if(meta.status==200){
this.$message.success(meta.msg);
}else{
this.$message.error(meta.msg);
}
/* 关闭loading */
setTimeout(()=>{
this.loading = false;
},500)
},
/* 点击删除文件的时候触发 */
handleRemove(file, fileList) {
console.log(file, fileList);
},
/* 点击已上传的图片预览的时候调用 */
handlePreview(file) {
console.log(file);
},
/* 因为组件设置了 :limit="3" 限制只能选择3个，超出3个就会执行handleExceed方法 */
handleExceed(files,fileList) {
this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
);
},
/* 真正删除之前的操作 */
beforeRemove(file) {
let flag = this.$confirm(`确定移除 ${file.name}？`);
/* this.$confirm返回是一个promise对象
点击确定，就返回已完成状态，就可以执行删除文件的方法
点击取消 就返回reject已拒绝的状态 就不执行删除文件的方法 */
console.log(flag);
return flag
},
},
};
</script>
<style>
</style>
