2021 Vue全家桶开发电商管理系统（Element-UI）08 商品列表功能的实现

叁歲伎倆 2023-01-07 07:20 284阅读 0赞

# 商品列表功能的实现 #

## 1 自定义格式化时间的全局过滤器 ##

打开main.js，创建过滤器

Vue.filter('dateFormat', function (originVal) { 
      const dt = new Date(originVal);
    
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + '').padStart(2, '0');
      const d = (dt.getDate() + '').padStart(2, '0');
    
      const hh = (dt.getHours() + '').padStart(2, '0');
      const mm = (dt.getMinutes() + '').padStart(2, '0');
      const ss = (dt.getSeconds() + '').padStart(2, '0');
      return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`;
    })

在html中使用

<el-table-column label="创建时间" width="200">
        <template v-slot="scope">{
       {scope.row.add_time | dateFormat}}</template>
    </el-table-column>

## 2 商品添加页面 ##

### 2.1 通过编程式导航跳转至商品添加页面 ###

addGoods() { 
          this.$router.push("/goods/add");
        }

### 2.2 商品添加页面的布局 （基本布局略） ###

#### Steps步骤条使用 ####

![image-20210114211612333][]

#### 使用纵向Tabs标签页 ####

![image-20210114212716287][]

#### 实现步骤条、Tab栏数据联动效果 ####

步骤条和Tab栏共用一个数据项

**注意 el-steps用activeIndex-0 保证其为数值**

<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>

<el-tabs tab-position="left" v-model="activeIndex">

activeIndex: "0"

#### 禁止标签页切换（当预验证不通过） ####

![image-20210114221341023][]

beforeTabLeave(activeName, oldActiveName) { 
        if (oldActiveName === "0" && this.addForm.goods_cat.length === 0) { 
            this.$message.error("请先选择商品分类");
            return false;
        }
    }

#### CheckBox多选框组的使用 ####

<el-form-item v-for="item in paramList" :key="item.attr_id" :label="item.attr_name">
        <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item2,i) in item.attr_vals" :key="i" :label="item2" border></el-checkbox>
        </el-checkbox-group>
    </el-form-item>

#### upload上传组件 ####

![image-20210115182851517][]

<el-upload class="upload-demo" :action="uploadurl" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" >
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

##### 解决：图像上传失败 请求码400 #####

查看Netword → upload请求→Preview 无效token

原因：upload未使用axios发送请求，未携带token

![image-20210115190732698][]

解决：使用其attribute设置请求头对象

![image-20210115190957046][]

headerObj: { 
        Authorization: window.sessionStorage.getItem("token")
    }

![image-20210115191314800][]

![image-20210115191255971][]

##### 使用上传成功钩子on-success处理上次 #####

![image-20210115192213562][]

![image-20210115192156569][]

handleSuccess(response) { 
        console.log(response);
        // 拼接图片信息对象，push至数组
        const picInfo = {  pic: response.data.tmp_path };
        this.addForm.pics.push(picInfo);
        console.log(this.addForm);
    }

##### 使用移除钩子on-remove监听移除 #####

handleRemove(file) { 
        // 获取想要删除的临时路径
        // 获取在pics中的索引值
        // 移除
        const path = file.response.data.tmp_path;
        const index = this.addForm.pics.findIndex(x => x.pic === path);
        this.addForm.pics.splice(index, 1);
        console.log(this.addForm.pics);
    },

##### 图片大图预览效果 #####

使用on-preview监听，保存点击图片的Url，弹出对话框进行显示。

<el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%">
        <img :src="previewPath" class="previewimg" alt />
        
    </el-dialog>

//处理图片预览效果
    handlePreview(file) { 
        this.previewDialogVisible = true;
        // 1.获取图片的Url地址
        this.previewPath = file.response.data.url;
    },

#### 富文本编辑器 ####

需要安装依赖→运行依赖→vue-quill-editor

![image-20210115194108088][]

点击详情打开文档，选择全局挂载，在main.js中输入以下：

![image-20210115194254767][]

##### 使用： #####

复制架构，声明数据和方法，添加一个添加商品的btn

![image-20210115194527417][]

#### 表单数据预验证 ####

需要对addForm进行**深拷贝**，因为我们需要将attr\_vals转为字符串，如果直接在本身上转，会报错，因为其绑定在级联选择器上，而其只能绑定数组。

##### 安装深拷贝依赖 #####

安装lodash

# 使用： #

复制架构，声明数据和方法，添加一个添加商品的btn

\[外链图片转存中…(img-DHtTMnIe-1610761213669)\]

#### 表单数据预验证 ####

需要对addForm进行**深拷贝**，因为我们需要将attr\_vals转为字符串，如果直接在本身上转，会报错，因为其绑定在级联选择器上，而其只能绑定数组。

##### 安装深拷贝依赖 #####

安装lodash

![image-20210115201810942][]

[image-20210114211612333]: /images/20221119/2538b34e2aac463e9ea791ace48a5902.png
[image-20210114212716287]: /images/20221119/39972e367b3f49219a8605daa4f1ecdd.png
[image-20210114221341023]: https://img-blog.csdnimg.cn/img_convert/7b9ca16f62eb5aea265576c76f3b87ff.png
[image-20210115182851517]: https://img-blog.csdnimg.cn/img_convert/b3ef4e90a0e8deb5a391c8c4b9d880ca.png
[image-20210115190732698]: https://img-blog.csdnimg.cn/img_convert/e4d39a6b0d09360ee7df19d5176d2275.png
[image-20210115190957046]: https://img-blog.csdnimg.cn/img_convert/8098ef2dd2ec5ce3c5e68f874aa38a58.png
[image-20210115191314800]: https://img-blog.csdnimg.cn/img_convert/ce2448a6cf6fdbf2fa7b06db461c0b15.png
[image-20210115191255971]: https://img-blog.csdnimg.cn/img_convert/f32e86a2aaf1b65b2a92e8c910038fd0.png
[image-20210115192213562]: https://img-blog.csdnimg.cn/img_convert/9670c2bdd1526b707ae411b2c783eb04.png
[image-20210115192156569]: https://img-blog.csdnimg.cn/img_convert/6d758b579da8382a422e6aba5dc791bf.png
[image-20210115194108088]: https://img-blog.csdnimg.cn/img_convert/75637a27555ada8cf25270136dd961c5.png
[image-20210115194254767]: https://img-blog.csdnimg.cn/img_convert/cec133a0453c53d3004a6aa692f7882a.png
[image-20210115194527417]: https://img-blog.csdnimg.cn/img_convert/952f4c360c6adf163c2be1d066cb2ec8.png
[image-20210115201810942]: https://img-blog.csdnimg.cn/img_convert/cc44855ad107bbb68712903f8b3bfc5d.png