这段时间用Vue做淘宝管理系统遇到的几个问题

最新推荐文章于 2023-01-16 00:45:08 发布

cuter、

最新推荐文章于 2023-01-16 00:45:08 发布

阅读量2k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45077672/article/details/117828413

版权

vue跨域 proxy element-ui imgurl slot-scope

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、浏览器跨域

在这里插入图片描述
解决方案:
在文件的根目录下面建一个vue.config.js配置文件，在里面设置代理地址

module.exports = {
    devServer: {
        host: 'localhost',
        port: '8084',//本地服务端口
        proxy: {
            '/api': {//所有以/api路径访问的接口 都会被拦截到目标端口
                target: 'http://127.0.0.1:3380',//要跨域请求的端口
                changeOrigin: true,//开启跨域
            }
        }
    }
}

在这里插入图片描述

二、 elementUI prop属性传值为url地址

 <el-table-column label="标题" prop="imgurl">
 <img src="imgurl">
 </el-table-column>

举上面这个例子，如果我们要想从服务器获取的url地址遍历到每一个图片上，实现不同图片的渲染我就是这样天真的以为，在这卡了半天，官方文档也没有获取prop值的具体方法。最后只好找点偏方还好解决了
解决方法

 <el-table-column label="封面" width="140">
      <template slot-scope="scope">
<img :src="scope.row.cover" alt="title" class="listGoodsimg">
      </template>
        </el-table-column>

把原有的prop删掉，然后添加一个模板放一个插槽属性slot-scope获取你当前的数据对象值，再给我的图片动态绑定一个src，再调用自己数据对象里面的avatar（服务器获取的这个是一个url地址），就完美的实现渲染了
话不多说上图
在这里插入图片描述
每张图片都渲染上去了的感觉是太快乐了
每天两个小技巧，隔壁帅哥跟着跑！