# vshop

**Repository Path**: fxzer/vshop

## Basic Information

- **Project Name**: vshop
- **Description**: 微品汇：Vue+ElementUI 后台管理项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 1
- **Created**: 2021-12-11
- **Last Updated**: 2023-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

## 一、微品汇后台管理项目
   **安装依赖**：`npm i`
   **启动项目**：`npm start`或`npm run dev`



## 二、技术栈

```
Vue全家桶、ElementUI、axios、Echarts
```



## 三、项目收获

> 练习完这个项目，从老师那里收获了不少编程小技巧。

例如：

- `v-if`与`v-else`中间不能有任何节点，否则失效！





1. 

```js
    //给 获取品牌列表数据函数 设页码默认值，
    async getTradeList(curPage = 1){
      this.loading = true
      // 获取品牌列表接口
      this.page = curPage
      let {page ,limit} = this
      let result = await this.$API.trademark.reqTradeMarkList(page,limit)
      // 请求成功
     if(result.code == 200){
       this.total = result.data.total
       this.tradeList = result.data.records
       this.loading = false
     }else{
       this.loading = flase
     }
     
    },
        
        
        
```

2. 

```html
 <el-input :placeholder="searchPlaceholder" v-model="searchVal" class="input-with-select" size="medium" clearable @clear="getTradeList(1,limit = 7)">
     <!-- 清空表单重新请求 -->
        <el-select v-model="searchMethod" slot="prepend" placeholder="请选择搜索方式">
          <el-option label="品牌ID" value="品牌ID"></el-option>
          <el-option label="关键词" value="关键词"></el-option>
        </el-select>
      <el-button slot="append" icon="el-icon-search" @click="searchDone"></el-button>
    </el-input>
```

3. 

```js
  updateDone(){
        // 表单验证
      this.$refs.tradeFormRef.validate( async (valid) =>{
        if(valid){
         this.fullscreenLoading = true
          let res = await this.$API.trademark.reqAddOrReqUpdate(this.tradeForm)
          this.fullscreenLoading = false
          if(res.code == 200){
            this.$message({
              type:'success',
              message:'修改品牌成功!'
            })
          }
        this.closeDialog() 
            //修改完当前行后，重新传递原本页码
        this.getTradeList(this.page)
        }
      })
      
    },
```

4.在一个数组中筛选另一个数组不存在的项

```js
// 计算未选择销售属性数组
    noSelectAttr(){
        // 过滤
       let noSelectList =  this.spuSaleAttrList.filter(item=>{
            return this.spuForm.spuSaleAttrList.every(item1 =>{
              return item.name !== item1.saleAttrName
            })
        })
        return noSelectList
    },
    // 计算未选择销售属性数组长度
    noSelectAttrLength(){
        return  this.noSelectAttr.length
    }

//绑定处理技巧0   :placeholder=" `还有 ${noSelectAttrLength} 个销售属性未选择`"
```

5.利用value收集id、name两个数据

```html
  <el-form-item label="销售属性"  >
        <el-select
          :placeholder=" `还有 ${noSelectAttrLength} 个销售属性未选择`"
          clearable
          filterable
          v-model="attrIdAndName"
          style="width:294px"
        >
          <el-option
            v-for="item in noSelectAttr"
            :key="item.id"
            :value="`${item.id}:${item.name}`" 
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="small"  class="add-attr-val"
          :disabled="!attrIdAndName" @click="addSaleAttr"> 添加销售属性</el-button
        >
      </el-form-item>

```