1. Specific implementation
1.1 <el-steps>
Mainly used to control the flow of each tabs
1.2 <el-tabs>
The reason why the form is wrapped in the outermost layer here is that there are multiple el-tab-pane items in tabs, and it is possible to add or modify product information in each item, in order to modify the information of multiple items Unified upload, so a form form is used here to wrap all
tips: the form form cannot be used as a sub-element of el-tabs, because the direct sub-element of tabs can only be el-tab-pane
In <el-tabs>, v-model is mainly used to bind the name value in the tab, so we need to define the name value for each tab <el-tab-pane> , when you switch, v- The model will receive the value of the currently switched tab-pane (so that we can judge which tab-pane is currently based on the name value and then execute the corresponding code logic), so here we bind the activeIndex variable to it, binding The activeIndex variable is to associate it with <el-steps> , compared to active receiving number in steps and v-model receiving string in el-tabs, so we bind name="0" to the name of el-tab-pane ,name="1..., and then when you switch, el-tabs can receive "0" or "1" or..., so the activeIndex bound in data will become a string form,
Question, is the tab-step receiving number? So how do we convert strings such as "0" and "1" into numeric types? That's very simple, just use : active="activeIndex - 0" in el-steps . In this way, the effect of association can be achieved.
2. The specific implementation of adding commodities
2.0 Let me first mention the usage of <el-form> wrapped in the outermost layer
2.1 Commodity form
- Part 1 (Product Information)
This part is mainly to enter the basic information of the product and an option to select the category to which the product belongs. The components used are mainly <el-form-item>, <el-input> and <el-cascader>. The main difficulty is that <el-cascader>, so here we mainly talk about the use of the <el-cascader> cascade selector:
The associated cascade selector recateList data structure is as follows:
Use @change="handleChange" in the cascade selector to listen for changes in the user's selection
- The second part and the third part (commodity parameters and commodity attributes)
At this time, you need to switch tabs, but here is a constraint for the business, that is, when you do not select the category of the product (that is, the cascade selector item), you cannot enter the second tab item. The relevant logic is as follows:
Then the second part is mainly to obtain the data and then display it. Here we mainly explain the attribute items under TV 2 under the product parameters. Firstly, obtain product parameters and product attribute data. The specific code is as follows. When this.activeIndex === "2" , obtain product parameter information, and when this.activeIndex === "3" , obtain product attribute information
//监听更新，在<el-tabs>中tabs变化的时候
async clickTabs(e) {
// console.log(this.activeIndex)
//即当切换到商品参数的时候，此时获取动态参数
//由于你点击tabs切换的时候activeIndex会实时更新，
//因此这里直接直接监听activeIndex的值去判断你点击的是哪一个
if (this.activeIndex === "2") {
const { data: res } = await this.$http.get(
`categories/${this.cateId}/attributes`,
{
params: {
sel: "many",
},
}
)
if (res.meta.status !== 200) {
this.$message.error("获取动态参数失败")
}
res.data.forEach((item) => {
item.attr_vals =
item.attr_vals.length === 0 ? [] : item.attr_vals.split(",")
})
this.manyList = res.data
}
//静态参数
if (this.activeIndex === "3") {
const { data: res } = await this.$http.get(
`categories/${this.cateId}/attributes`,
{
params: {
sel: "only",
},
}
)
if (res.meta.status !== 200) {
this.$message.error("获取动态参数失败")
}
this.onlyList = res.data
}
},The main function here is that since the returned attr_vals data is in the form of a string separated by and, but the display requires displaying one by one, so here use forEach traversal to separate it into an array with "," symbols, and then Traversing the display again
The effect is as follows:
- Part 4 (upload pictures)
related configuration
actionn: Configure the path for uploading, use the complete service address here! ! Because the upload request mode used by the upload image upload component is different from what we wrote, we mainly use request interception, then every request will be intercepted by us before sending, and upload cannot, so you need to perform related tasks according to the requirements of this component configuration
//预览
handlePreview(file) {
this.imgOnline = file.url
this.imgVisible = true
},
//删除
handleRemove(file) {
const index = this.addForm.imgList.findIndex((x) => {
return (x = file.response.data.tmp_path)
})
this.addForm.imgList.splice(index, 1)
},
//图片上传成功时候回调
uploadImgs(file) {
if (file.meta.status !== 200) {
this.$message.error("上传照片失败")
}
this.addForm.imgList.push(file.data.tmp_path)
},
- Part V (Commodity Contents)
Rich text technology is used here
- First you need to install:
- import
- use
- Effect
- Finally, submit the form action
- Use of lodash
1. First you need to download "lodash"
2. Then introduce import_form 'loadsh"
3. Use
2 specific renderings
- jump
When you click to add a product, you will be redirected to the 'add' routing page, and all product information operations are performed on the 'goods' routing page.
2.add routing page
3. tabs switching effect
The page for adding products is composed of multiple parts, and the switching between each two parts is mainly switched by tabs
4. Overall structure
