前端代码如下：template div el-row style="margin-top: 16px" el-col :span="6" style="margin-left: 16px" span style="width: 100px"名称：/span el-input v-model="querygoodsname" size="mini" style="width: 260px" placeholder="名称" /el-input /el-col el-col :span="4" el-button type="primary" size="medium" style="width: 90px" @click="GetGoodsInfos()" 查询/el-button /el-col /el-row el-row style="margin-left: 20px; margin-top: 16px" el-table :data="queryGoodsInfos" :max-height="720" border style="width: 100%" el-table-column prop="Id" label="商品编号" sortable/el-table-column el-table-column prop="goodsname" label="商品名称" sortable/el-table-column el-table-column prop="price" label="商品价格" sortable/el-table-column el-table-column prop="productfactory" label="生产厂商" sortable/el-table-column el-table-column prop="unit" label="单位" sortable/el-table-column el-table-column prop="" label="操作" template slot-scope="scope" el-button type="text" size="small"查看/el-button el-button type="text" size="small"修改/el-button el-button type="text"size="small"删除/el-button /template /el-table-column /el-table /el-row /div/templatescriptimport waves from "@/directive/waves/index.js"; // 水波纹指令import { mapGetters } from "vuex";import { GetRoleInfos} from "@/api/role.js";import { GetGoods, QueryGoodsInfos, AddGoods, UpdateGoods, DeleteGoods} from "@/api/goods.js";export default { name: "GoodsManage", components: {}, directives: { waves, }, data() { return { goods: { Id: 0, goodsname: "", price: 0.0, type: "", productfactory: "", unit: "", }, role:"", roleInfos: [], querygoodsname: "", // 查询框的用户名称 goodsInfoVisable: false, goodsInfos: [], queryGoodsInfos: [], rules: { goodsname: [ { required: true, message: "请输入用户名称", trigger: "blur" }, ] }, }; }, computed: { ...mapGetters(["name", "avatar", "roles"]), }, watch: {}, created() { this.userName = this.name; GetGoods() .then((response) = { this.goodsInfos = this.queryGoodsInfos = response.Data; }) .catch(() = { console.log("获取商品数据失败"); }); GetRoleInfos(this.roleInfo) .then((response) = { this.roleInfos = response.Data; }) .catch(() = { console.log("获取角色数据失败"); }); }, methods: { GetGoodsInfos() { if(this.querygoodsname) { this.goods.goodsname = this.querygoodsname; this.queryGoodsInfos=[]; QueryGoodsInfos({goodsname: this.querygoodsname}) .then((response) = { console.log("获取商品数据