<el-button slot="append"></el-button> 里的 slot="append"  就是一个UI摆放的位置,其实就是封装的样式布局。

• append：代表放在紧贴在依赖组件的后面

• prepend：代表放在紧贴在依赖组件的前面

前端vue文件部分代码：

<template>
    <div id="material_stock">
        <page-back-header :page-name="$t('sidebar.materialStock')"></page-back-header>
        <div class="content">
            <div>
                <el-form inline label-width="100px" label-position="left">
                <el-form-item :label="$t('materialStock.materialId')">
                  <el-input v-model="condition.materialId"  clearable >
<!--                    <el-button slot="append" icon="el-icon-search" @click.native="openSelectMaterialDialog"></el-button>-->
                    <el-button slot="append" icon="el-icon-search" @click.native="openSelectMaterialDialog"></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('materialStock.materialName')">
                  <el-input v-model="condition.materialName"  clearable >
                    <el-button slot="append" icon="el-icon-search" @click.native="openSelectMaterialDialog"></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('plant.plantName')">
                  <el-input  v-model="condition.plantName"  clearable >
                    <el-button slot="append"  icon="el-icon-search" @click.native="openSelectPlantDialog"></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('warehouse.warehouseName')">
                  <el-input v-model="condition.warehouseName"  clearable >
                    <el-button slot="append"  icon="el-icon-search" @click.native="openSelectWarehouseDialog"></el-button>
                  </el-input>
                </el-form-item>
                </el-form>
                <el-form inline label-width="100px" label-position="left">
                  <el-form-item :label="$t('storageArea.areaName')">
                    <el-input  v-model="condition.areaName"  clearable >
                      <el-button slot="append" icon="el-icon-search" @click.native="openSelectAreaDialog"></el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item :label="$t('locationType.locationTypeName')">
                    <el-input  v-model="condition.locationTypeName"  clearable >
                      <el-button slot="append" icon="el-icon-search" @click.native="openSelectLocationTypeDialog"></el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item :label="$t('storageBin.binName')">
                    <el-input  v-model="condition.binName"  clearable >
                      <el-button slot="append" icon="el-icon-search" @click.native="openSelectBinDialog"></el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="query-btn" type="primary" @click="query">{{$t('common.query')}}</el-button>
                  </el-form-item>
                </el-form>
              <select-material-dialog :dialogVisible="dialog.selectMaterial.show" :data="condition" :singleChoice="true"
                                      @close="closeSelectMaterialDialog" @confirm="getSelectedMaterialData">
              </select-material-dialog>
              <select-warehouse-dialog :dialogVisible="dialog.selectWarehouse.show" :data="condition" :singleChoice="true"
                                       @close="closeSelectWarehouseDialog" @confirm="getSelectedWarehouseData">
              </select-warehouse-dialog>
              <select-plant-dialog :dialogVisible="dialog.selectPlant.show" :data="condition" :singleChoice="true"
                                       @close="closeSelectPlantDialog" @confirm="getSelectedPlantData">
              </select-plant-dialog>
              <select-location-type-dialog :dialogVisible="dialog.selectLocationType.show" :data="condition" :singleChoice="true"
                                       @close="closeSelectLocationTypeDialog" @confirm="getSelectLocationTypeData">
              </select-location-type-dialog>
              <select-storage-area-dialog :dialogVisible="dialog.selectStorageArea.show" :data="condition" :singleChoice="true"
                                        @close="closeSelectAreaDialog" @confirm="getSelectAreaData">
              </select-storage-area-dialog>
              <select-storage-bin-dialog :dialogVisible="dialog.selectStorageBin.show" :data="condition" :singleChoice="true"
                                         @close="closeSelectBinDialog" @confirm="getSelectBinData">
              </select-storage-bin-dialog>
            </div>
            <div>
                <el-table :data="materialStockData"
                          border
                          :height="getMaterialStockTableHeight"
                          class="content-table">
                    <el-table-column prop="materialId" :label="$t('materialStock.materialId')" width="155"></el-table-column>
                    <el-table-column prop="materialName" :label="$t('materialStock.materialName')" width="155"></el-table-column>
                    <el-table-column prop="storageBin.plantName" :label="$t('plant.plantName')"></el-table-column>
                    <el-table-column prop="storageBin.warehouseName" :label="$t('warehouse.warehouseName')"></el-table-column>
                    <el-table-column prop="storageBin.storageAreaName" :label="$t('storageArea.areaName')"></el-table-column>
                    <el-table-column prop="storageBin.locationTypeName" :label="$t('locationType.locationTypeName')"></el-table-column>
                    <el-table-column prop="storageBin.binName" :label="$t('storageBin.binName')"></el-table-column>
                    <el-table-column prop="totalQuantity" :label="$t('materialStock.totalQuantity')"></el-table-column>
                    <el-table-column prop="availableQuantity" :label="$t('materialStock.availableQuantity')"></el-table-column>
                    <el-table-column prop="frozenQuantity" :label="$t('materialStock.frozenQuantity')"></el-table-column>
                    <el-table-column prop="undoneQuantity" :label="$t('materialStock.undoneQuantity')"></el-table-column>
					          <el-table-column prop="materialUnit" :label="$t('materialStock.materialUnit')"></el-table-column>
                    <el-table-column prop="modeType" :label="$t('materialBase.modeType')" width="155">
                        <template slot-scope="scope">
                            {{$enums.materialModeType.getLabelByValue(scope.row.modeType)}}
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('common.operation')">
                        <template slot-scope="scope">
                            <el-button type="text" @click="openMaterialStockDetailsDialog(scope.row)">
								{{getBtnText(scope.row.modeType)}}
							</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--底部行-->
            <div class="pageBottom">
                <el-pagination
                        background
                        style="float: right;margin:0"
                        @size-change="listMaterialStockData(1)"
                        @current-change="listMaterialStockData"
                        :current-page.sync="pagination.page"
                        :page-size.sync="pagination.pageSize"
                        :total="pagination.total"
                        layout="total, sizes, pager">
                </el-pagination>
            </div>
        </div>

        <!--物料库存详情弹窗-->
        <material-stock-details-dialog
            :dialogVisible="dialog.materialStockDetails.show"
            :stockData="currentViewRowData"
            @close="closeMaterialStockDetailsDialog">
        </material-stock-details-dialog>

    </div>
</template>