antd的列表中顯示圖片

 在列表中顯示圖片

引入全局的文件下載地址

  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="width:100px;height:102px;">
            <a-avatar shape="square" :src="getAvatarView(record.goodsImg)"
                      style="width: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="width: 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