说明

该模板适用于 带按钮、搜索栏 地方;

图例

代码

  1. <rx-fit :isheader="isheader">
  2. <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
  3. <div class="table-operator">
  4. <a-button type="primary" icon="plus" @click="add">新建</a-button>
  5. <a-dropdown>
  6. <a-button style="margin-left: 8px"> 更多 <a-icon type="down" /> </a-button>
  7. <a-menu slot="overlay">
  8. <a-menu-item key="1"><a-icon type="user" />编辑</a-menu-item>
  9. <a-menu-item key="2" ><a-icon type="delete" />删除</a-menu-item>
  10. <a-menu-item key="3"><a-icon type="user" />表单模板</a-menu-item>
  11. </a-menu>
  12. </a-dropdown>
  13. </div>
  14. <span class="search-btn-box" v-if="!isheader">
  15. <span class="search-btn" @click.stop="searchshow">
  16. <i class="iconfont iconguolv"></i>过滤
  17. </span>
  18. </span>
  19. </div>
  20. <div slot="searchbar" searchdir="right" btnalign="right" v-if="fitSearch" @search="search" @cancel="cancel" @close="close">
  21. <a-form :layout="colLayout">
  22. <a-row :gutter="24">
  23. <a-col :span="colSpan">
  24. <a-form-item label="名称">
  25. <a-input placeholder="请输入名称" v-model="queryParam.Q_NAME__S_LK"/>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :span="colSpan" v-if="isheader">
  29. <span class="table-page-search-submitButtons">
  30. <a-button type="primary" icon="search">查询</a-button>
  31. <a-button style="margin-left: 4px" >重置</a-button>
  32. <a @click="toggleAdvanced" style="margin-left: 8px">
  33. {{ advanced ? '收起' : '展开' }}
  34. <a-icon :type="advanced ? 'up' : 'down'" />
  35. </a>
  36. </span>
  37. </a-col>
  38. <template v-if="advanced">
  39. <a-col :span="colSpan">
  40. <a-form-item label="事项标题">
  41. <a-input placeholder="请输入事项标题" />
  42. </a-form-item>
  43. </a-col>
  44. </template>
  45. </a-row>
  46. </a-form>
  47. </div>
  48. <rx-grid>
  49. 这是表格
  50. </rx-grid>
  51. </rx-fit>
  52. //注意:过滤按钮的事件需要加个stop。(@click.stop="xxx");
  53. //<template v-if="advanced">只在需要显示在头部的时候加,如果不需要可以不加这个标签;
  54. import { RxFit,RxGrid } from 'jpaas-common-lib';
  55. export default{
  56. components: {
  57. RxFit,
  58. RxGrid
  59. },
  60. data(){
  61. return {
  62. isheader:false,
  63. fitSearch:false,
  64. colSpan:24,
  65. colLayout:'vertical',
  66. advanced:false
  67. }
  68. },
  69. created(){
  70. this.initRxFit();
  71. },
  72. methods:{
  73. initRxFit(){
  74. //初始化rx-fit模板 ;
  75. this.colLayout = this.isheader ? 'inline':'vertical' ;
  76. this.colSpan = this.isheader ? 8:24 ;
  77. this.advanced = this.isheader ? false : true ;
  78. this.fitSearch = this.isheader ? true :false ;
  79. },
  80. toggleAdvanced() {
  81. this.advanced = !this.advanced
  82. },
  83. search(){
  84. //搜索按钮触发
  85. },
  86. cancel(){
  87. //重置按钮触发
  88. },
  89. close(){
  90. //关闭按钮
  91. this.fitSearch = false ;
  92. },
  93. searchshow(){
  94. this.fitSearch = !this.fitSearch ;
  95. }
  96. }
  97. }
文档更新时间: 2021-08-17 09:21   作者:yangxing