安装element
在主文件夹终端使用npm安装 链接在上面
接下来要引入
组件 | Element 在路由写下红框内的代码
这样,在任何文件都可以使用element
这里附一条按钮 去试试吧!
<el-button type="primary">主要按钮</el-button>
使用element
创建 商品添加 文件 目标成品如下
红色区域为这次任务
创建一个 "商品添加" 文件
mian文件写:
{ name: "商品添加", url: "/admin_main/Admin_Goods_Add" }
写路由(略)
"商品添加" 文件 :
copy element 的表单 的红色的一部分
<div>
<div>商品添加</div>
<el-form ref="form" label-width="80px">
<el-form-item label="商品名称">
<el-input v-model="goodsAddData.name"></el-input>
</el-form-item>
<el-button type="primary" @click="Add_add">立即创建</el-button>
<el-button>取消</el-button>
</el-form>
</div>
红色部分去掉 黄色部分需要修改
<div>
<div>商品添加</div>
<el-form ref="form" label-width="80px">
<el-form-item label="商品名称">
<el-input v-model="goodsAddData.name"></el-input>
</el-form-item>
<el-form-item label="购买限制">
<el-input v-model="goodsAddData.butLimit"></el-input>
</el-form-item>
<el-form-item label="介绍">
<el-input v-model="goodsAddData.intro"></el-input>
</el-form-item>
<el-form-item label="库存">
<el-input v-model="goodsAddData.stock"></el-input>
</el-form-item>
<el-form-item label="商品的分类">
<el-input v-model="goodsAddData.categoryId"></el-input>
</el-form-item>
<el-form-item label="商品的品牌">
<el-input v-model="goodsAddData.brandId"></el-input>
</el-form-item>
<el-button type="primary" @click="Add_add">立即创建</el-button>
<el-button>取消</el-button>
</el-form>
</div>