<template>
? <div>
? ? <h1>goods</h1>
? ? <el-button type="danger" plain @click="del">批量刪除</el-button>
? ? <!-- 提示框的顏色 有l(wèi)ight和dark -->
? ? <!-- selection-change 勾選的時(shí)候觸發(fā)的函數(shù) -->
? ? <el-table
? ? ? :data="tableData"
? ? ? tooltip-effect="dark"
? ? ? @selection-change="handleSelectionChange"
? ? ? :row-key="row=>row.goods_id"
? ? >
? ? ? <!-- type="selection"表示一個(gè)勾選框 -->
? ? ? <el-table-column
? ? ? ? type="selection" width="55"
? ? ? ? :reserve-selection="true"
? ? ? >
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="add_time"
? ? ? ? label="添加時(shí)間"
? ? ? ? width="120"
? ? ? ></el-table-column>
? ? ? <el-table-column prop="goods_id" label="商品id" width="120">
? ? ? ? <!-- 使用作用域插槽加上tag標(biāo)簽框 -->
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-tag>{{ scope.row.goods_id }}</el-tag>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <!-- show-overflow-tooltip 當(dāng)數(shù)字超出長度 鼠標(biāo)移上去顯示提示框 -->
? ? ? <el-table-column
? ? ? ? prop="goods_name"
? ? ? ? label="商品名稱"
? ? ? ? show-overflow-tooltip
? ? ? ></el-table-column>
? ? ? <el-table-column prop="goods_number" label="商品數(shù)量" width="120">
? ? ? </el-table-column>
? ? ? <el-table-column prop="goods_price" label="商品價(jià)格" width="120">
? ? ? </el-table-column>
? ? </el-table>
? </div>
</template>
<script>
import { menusGet, delDelete } from "@/http/request.js";
export default {
? data() {
? ? return {
? ? ? pagenum: 1,
? ? ? pagesize: 10,
? ? ? query: "",
? ? ? tableData: [],
? ? ? /* 勾選的數(shù)據(jù)放在整個(gè)數(shù)組里面 */
? ? ? multipleSelection: [],
? ? };
? },
? methods: {
? ? /* 勾選的時(shí)候觸發(fā) 里面的形參就是 勾選的數(shù)據(jù) 會(huì)組合成一個(gè)數(shù)組 */
? ? handleSelectionChange(val) {
? ? ? this.multipleSelection = val;
? ? },
? ? /* 批量刪除 */
? ? del() {
? ? ? console.log(delDelete);
? ? ? this.$confirm('您確定要?jiǎng)h除嗎？')
? ? ? .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;
? ? ? ? ? ? ? /* 狀態(tài)200表示請(qǐng)求成功丈挟，最后一個(gè)循環(huán)執(zhí)行的時(shí)候再給提示 */
? ? ? ? ? ? ? if(meta.status==200&&(i+1)==this.multipleSelection.length){
? ? ? ? ? ? ? ? this.$message.success(meta.msg)
? ? ? ? ? ? ? ? /* 刪除數(shù)據(jù)后志电，重新渲染頁面 */
? ? ? ? ? ? ? ? this.showTable();
? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? });
? ? ? })
? ? ? /* 點(diǎn)擊取消走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();
? },
};
