<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="商品分类1" prop="GTId">
<el-select v-model="ruleForm.GTId" placeholder="请选择" @change="loadTypeTwo">
<el-option
v-for="(item,index) in TypeOne"
:key="index"
:label="item.GTName"
:value="item.GTId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品分类2" prop="GPId">
<el-select v-model="ruleForm.GPId" placeholder="请选择">
<el-option
v-for="(item,index) in TypeTwo"
:key="index"
:label="item.GTName"
:value="item.GTId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品品牌" prop="GBId">
<el-select v-model="ruleForm.GBId" placeholder="请选择">
<el-option
v-for="(item,index) in Brand"
:key="index"
:label="item.GBName"
:value="item.GBId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品名称" prop="GoodsName">
<el-input v-model="ruleForm.GoodsName"></el-input>
</el-form-item>
<el-form-item label="副标题" prop="SubHead">
<el-input v-model="ruleForm.SubHead"></el-input>
</el-form-item>
<el-form-item label="商品货号" prop="GoodsCode">
<el-input v-model="ruleForm.GoodsCode"></el-input>
</el-form-item>
<el-form-item label="商品售价" prop="GoodsPrice">
<el-input v-model="ruleForm.GoodsPrice"></el-input>
</el-form-item>
<el-form-item label="市场价" prop="MarketPrice">
<el-input v-model="ruleForm.MarketPrice"></el-input>
</el-form-item>
<el-form-item label="商品库存" prop="GoodsInventory">
<el-input v-model="ruleForm.GoodsInventory"></el-input>
</el-form-item>
<el-form-item label="商品预警值" prop="GoodsInventoryWarningValue">
<el-input v-model="ruleForm.GoodsInventoryWarningValue"></el-input>
</el-form-item>
<el-form-item label="商品图片" prop="GoodsPriture">
<el-upload
class="avatar-uploader"
action="http://localhost:54935/api/Goods/UpLoad"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品介绍">
<div id="demo1"></div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(‘ruleForm‘)"
>立即创建</el-button
>
<el-button @click="resetForm(‘ruleForm‘)">重置</el-button>
<el-button type="success" @click="loadData">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
二、删除
//删除 handleDelete(index, row) { this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$axios .get("http://localhost:54935/api/Goods/Del?id=" + row.GoodsId) .then((res) => { if (res.data > 0) { this.$message.success("删除成功"); this.loadData(); } else { this.$message.error("删除失败"); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); console.log(index, row); }, //全选 handleSelectionChange(val) { this.multipleSelection = val //清空 this.ids = [] for (let index = 0; index < val.length; index++) { this.ids.push(val[index].GoodsId) } }, //批量删除 handleDelAll() { if(this.ids.length===0){ this.$message.error(‘至少选择一条数据‘); return; } this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$axios .get( `http://localhost:54935/api/Goods/DelAll?ids=${this.ids.toString()}` ) .then((res) => { if (res.data > 0) { this.$message.success("批量删除成功"); this.$router.push(‘/index‘); } else { this.$message.error("批量删除失败"); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, }
三、修改
//修改 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.ruleForm.GoodsIntroduce=this.editor.txt.html();//获取文本编辑器的值 //获取图片 this.ruleForm.GoodsPicture=this.ruleForm.GoodsPicture.split(‘/‘)[this.ruleForm.GoodsPicture.split(‘/‘).length-1] this.$axios .post( "http://localhost:54935/api/Goods/Edit", this.ruleForm ) .then((res) => { if (res.data > 0) { this.$message.success(‘修改成功‘); this.$router.push(‘/index‘); } else { this.$message.error(‘修改失败‘); } }); } else { console.log("error submit!!"); return false; } }); } //函数 mounted() { const editor = new wangEditor(`#demo1`) // 配置 onchange 回调函数，将数据同步到 vue 中 editor.config.onchange = (newHtml) => { this.editorData = newHtml } // 创建编辑器 editor.create() this.editor = editor //接收穿过来的数据 this.ruleForm=this.$route.query; //接收富文本编辑器的数据 editor.txt.html(this.ruleForm.GoodsIntroduce) //接收图片 this.imageUrl=this.ruleForm.GoodsPicture //接收品牌 // this.ruleForm.GBId=this.$route.query.GBName let gbid=this.$route.query.GBId this.ruleForm.GBId=Number(gbid); //接收分类 // this.ruleForm.GTId=this.$route.query.GTName // this.ruleForm.GPId=this.$route.query.GPName let gtid=this.$route.query.GTId this.ruleForm.GTId=Number(gtid); let gpid=this.$route.query.GPId this.ruleForm.GPId=Number(gpid); }, };
四、显示
<template>
<div>
<div>
<el-input
type="text"
v-model="goodsname"
style="width: 200px; height: 50px"
placeholder="请输入商品名称"
></el-input>
<el-select v-model="gbid" placeholder="请选择">
<el-option
v-for="item in select"
:key="item.value"
:label="item.GBName"
:value="item.GBId"
>
</el-option>
</el-select>
<el-button type="success" @click="loadData">查询</el-button>
<el-button type="primary" @click="loadAdd">添加</el-button>
<el-button type="danger" @click="handleDelAll">批量删除</el-button>
</div>
<div>
<el-table :data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55">
</el-table-column>
<el-table-column prop="GoodsId" label="编号" width="180">
</el-table-column>
<el-table-column label="商品图片" width="180">
<template slot-scope="scope">
<img
:src="scope.row.GoodsPicture"
width="100"
height="100"
alt=""
/>
</template>
</el-table-column>
<el-table-column label="商品名称" width="180">
<template slot-scope="scope">
<p>{{scope.row.GoodsName}}</p>
<p>品牌：{{scope.row.GBName}}</p>
</template>
</el-table-column>
<el-table-column label="价格/货号" width="180">
<template slot-scope="scope">
<p>价格：￥{{scope.row.GoodsPrice.toFixed(2)}}</p>
<p>货号：{{scope.row.GoodsCode}}</p>
</template>
</el-table-column>
<el-table-column label="状态" width="180">
<template slot-scope="scope">
<span>{{scope.row.Status?"上架":"下架"}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
<el-button
size="mini"
type="success"
@click="handleStatus(scope.$index, scope.row)"
>下架</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageindex"
:page-sizes="[1, 3, 5, 10]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalcount"
>
</el-pagination>
</div>
</template>
原文：https://www.cnblogs.com/666l/p/15302394.html