# 带缩略图的多类别展示——如底图管理
> multi-img-with-form

<img alt="多类别展示示例" src="../images/basemapConfigUI.png" width="100%">

## 何时使用

此组件适用于配置数组，且数组项中包含待展示的缩略图的情况；

组件提供对缩略图的展示，以及数组数据的增删改查。

## 1、组件引用示例

``` javascript
<template>
  <multi-img-with-form
    ref="multiImgWithForm"
    :config="widgetConfig.baseMapList"
    :baseApi="baseApi"
    TitleLabel="name"
    :imgWidth="200"
    :imgHeight="133"
    @editItem="editItem"
    @deleteItem="deleteItem"
    @addItem="addItem"
  />
</template>
```

## 2、参数说明

|参数|说明|是否必填|类型|默认值|
|:---|:---|:---|:---|:---|
|config|配置项|**必填项**|数组||
|baseApi|缩略图的基地址|可选项|字符串||
|TitleLabel|带展示标题对应的字段名|可选项|字符串|`'title'`|
|imgWidth|缩略图的宽度|可选项|数字|300|
|imgHeight|缩略图的高度|可选项|数字|180|
|@addItem|点击添加按钮的回调|可选项|函数型||
|@editItem|点击编辑按钮的回调|可选项|函数型||
|@deleteItem|点击删除按钮的回调|可选项|函数型||

## 3、示例代码

``` vue
<template>
  <div>
    <multi-img-with-form
      ref="multiImgWithForm"
      :config="widgetConfig.baseMapList"
      :baseApi="baseApi"
      TitleLabel="name"
      :imgWidth="200"
      :imgHeight="133"
      @editItem="editItem"
      @deleteItem="deleteItem"
      @addItem="addItem"
    />
  </div>
</template>

<script>

export default {
  name: 'BasemapManagerSetting',
  data() {
    return {
      baseApi: '',
    };
  },
  props: {
    widgetConfig: Object
  }
  methods: {
    editItem(index) {
      console.log('编辑节点', index)
    },
    deleteItem(index) {
      console.log('删除节点', index)
    },
    addItem() {
      console.log('添加节点')
    },
  },
};
</script>
```
