search

zollero / el-search-table-pagination

🐶 Combine Form, Table and Pagination components of Element UI together.
MIT License
306 stars 79 forks source link

封装表单是否支持自定义template？ #6

Closed keer3 closed 6 years ago

keer3 commented 6 years ago

例如是否支持这种复合型输入框 image

zollero commented 6 years ago

@sunshumin 支持，请使用 slot=form 来定义，这种方式还是最原始的 Element UI 的写法，只不过用 slot=form 包裹了一下。

zollero commented 6 years ago

@sunshumin 示例代码如下：

<el-search-table-pagination
  :url="api.listUrl"
  :params="formData"
  :columns="columns"
  list-field="result.rows"
  total-field="result.total"
  page-index-key="pageNumber"
  page-size-key="pageSize"
  :data-handler="dataHandler">

  <template slot="form" slot-scope="scope" >
    <el-form :inline="true" style="margin-left: 20px" :model="formData">
      <el-form-item label="类型" label-width="100px" prop="type">
        <el-select v-model="formData.type" size="small" style="width:210px">
          <el-option v-for="item in resourceProp.positionType"
          :key="item.value" :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="ID" label-width="100px" prop="id">
        <el-input v-model="formData.id" size="small" style="width:210px">
        </el-input>
      </el-form-item>
      <el-button size="small" type="primary" 
        :loading="scope.loading"
        @click="scope.search">查询</el-button>
    </el-form>
  </template>
</el-search-table-pagination>

请注意下图中的几处，参考文档进行： image