在列表中显示图片
引入全局的文件下载地址
import { getFileAccessHttpUrl } from '@/api/manage'
定义返回图片完整地址的方法
methods: { getAvatarView: function(avatar) { return getFileAccessHttpUrl(avatar) } }
定义返回插槽
columns: [ { title: '图片', align: 'center', dataIndex: 'goodsImg', scopedSlots: { customRender: 'avatarslot' } } ]
定义一个插槽
<template slot="avatarslot" slot-scope="text, record, index" v-if="record.goodsImg != null" && record.goodsImg !="''"> <div class="anty-img-wrap" style="100px;height:102px;"> <a-avatar shape="square" :src="getAvatarView(record.goodsImg)" style="100px;height:102px; margin: 0 0 8px 50px;"> </a-avatar> </div> </template>
效果
搜索条件中增加列表选项
在data中定义属性
data() { return { tenantList: [] } }
定义初始化数据的方法
methods: { queryByUserTenantId() { queryByUserTenantId().then((res) => { if (res.success) { //成功 this.tenantList = res.result.tenantList } else { //失败 console.log(res.message) } }) } }
页面加载初始化数组
created() { this.queryByUserTenantId() }
改造input框
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="所属租户"> <a-select style=" 100%" v-model="queryParam.tenantId" placeholder="请选择所属租户"> <a-select-option v-for="(tenant,index) in tenantList" :key="index" :value="tenant.id"> {{tenant.tenantName}} </a-select-option> </a-select> </a-form-item> </a-col>
效果
modal中加载树形结构的,商品分类
定义获取数据的形式
methods: { loadTree(){ let that = this; queryGoodsCategoryTree().then((res)=>{ if(res.success){ that.treeData = []; let treeList = res.result.treeList; for(let a=0;a<treeList.length;a++){ let temp = treeList[a]; temp.isLeaf = temp.leaf; that.treeData.push(temp); } } }); } }
使用日期组件
ant design vue日期组件怎么清空(a-range-picker,a-date-picker)
https://blog.csdn.net/weixin_45629194/article/details/101279590