zollero / el-search-table-pagination

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

怎么在查询form中添加自己的按钮 #20

Closed hanzhenchaoGit closed 6 years ago

hanzhenchaoGit commented 6 years ago

怎么在查询form中添加自己的按钮 比如我表格中需要新增数据 需要一个添加按钮 来弹出新增框 该怎么实现

zollero commented 6 years ago

直接在 标签内写你想呈现的内容, 内的内容会被显示在 form 和 table 中间。参考下面这个:

<el-search-table-pagination
      type="local"
      :data="tableData"
      :page-sizes="[5, 10]"
      :columns="columns"
      :form-options="formOptions">
      <div style="text-align: right;">
        <el-button>新增</el-button>
      </div>
</el-search-table-pagination>

效果是下面这个: image

全部代码看下面这个示例: https://codepen.io/zollero/pen/gKxYJa

hanzhenchaoGit commented 6 years ago

我想的是跟查询 重置按钮放在一起 显得版式好看点

zollero commented 6 years ago

这个在现在的布局结构中实现不了,form 是单独的组件,没有预留单独的 slot 入口

hanzhenchaoGit commented 6 years ago

这个我觉得以后有必要实现一下吧 如果这是作为一个完整的增删改查列表组件的话 肯定是要有一个新增入口的

hanzhenchaoGit commented 6 years ago

我自己实现了

zollero commented 6 years ago

你很棒

younglee1 commented 6 years ago

@hanzhenchaoGit 你好,请问这部分您怎么实现的呢,我现在也在做这部分,想参考一下,谢谢。

hanzhenchaoGit commented 6 years ago

@younglee1 我原来那种方式虽然实现了 但是最终觉得在版式上不太好 操作按钮和查询按钮就是应该分开 放到一块就会很丑 可以按照作者提供的那个方式添加按钮

younglee1 commented 6 years ago

好的,谢谢

hanzhenchaoGit commented 6 years ago

@younglee1 table image search image 使用时 image