查询和表格为一体的封装组件

注意： 该组件为公司内部使用，部分方法没有实现独立抽取；使用需要改造

• 本组件数目针对内部使用者

API 文档

属性

感谢 @zollero

参考 ：https://github.com/zollero/el-search-table-pagination/blob/master/docs/zh_CN.md

| 参数 | 类型 | 说明 | 默认值 | 是否必须 | | --- | --- | --- | --- | --- | | form-options | object | 数据主体 | - | 是 | | url | string | 请求Url | - | 是 | | ref | searchForm | 默认参数 | | 是 | | columns | array | 表格数据 | [] | 是 | | headers | object | 默认请求参数 | - | 否 | | groupBtn | array | 按钮组 | [] | 是 | | btnsize | string | 按钮大小 | [] | 否 | | paginationHt | math | 多余的高度 | [] | 否 | | selectionShow | Boolean | 是否需要选择框,配合’selection-change‘ 使用 | - | 否 |

Table column 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- |------|:----:|-----|:-----:| | prop | 展示字段的字段值 | string | - | - | | label | 列名 | string | - | - | | width| 列宽 | number | - | 140 | | minWidth | 最小列宽 | number | - | - | | filter | 过滤器名（只有配置在全局的filter才有效） | string | - | - | | render | 处理数据的函数，接收行数据作为参数 | function | - | - | | slotName | 使用 slot 标记的代码块的 slot 属性值 | string | - | - | | type | 0.4.28后支持，Element UI Table支持的一个属性，借用这个属性来切换是否使用本组件column内的插槽内容，当本属性没有给值时，本组件保持和之前版本一样的兼容性，组件会接管column数组中的定义并定义Element UI Table Column，只有指定的属性才会给予，并且会实现组件中给予的render和formatter等功能。如果该属性一旦有给值时，column定义的所有属性都会传递给Element UI Table Column，本组件也不会对column内容进行处理，相应的处理能力也交给Element UI Table本身，通过这种方式，也可以支持Element UI Table中的多选列，Index列等，设置为default也即为Element UI Table的缺省模式，会从数据对象中读取prop属性，也会受到filter的过滤，只不过处理都是Element UI Table来进行了。 | string | default/selection/index/expand | |

注：更多属性，请参考 Element UI Table column 的文档。

支持的Element UI Table column属性有：column-key / fixed / render-header / sortable / sort-by / sort-method / resizable / formatter / show-overflow-tooltip / align / header-align / class-name / label-class-name / selectable / reserve-selection / filters / filter-placement / filter-multiple / filter-method / filtered-value 。

注：关于formatter属性，如果定义了renderer或者filter的时候，formatter不起作用。

Form Option 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- |------|:----:|-----|:-----:| | forms | form表单配置对象数组。详情见Form Item 属性 | array[object] | - | - | | size | 全局的表单尺寸 | string | large/small/mini | - | | showResetBtn | 是否显示'重置'按钮 | boolean | - | false | inline | 行内表单模式 | boolean | - | false | | labelWidth | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | number | - | - | | itemWidth | 表单域宽度 | number | - | - | submitHandler | 查询按钮的click处理函数，接收form表单对象数据作为第一个参数 | function | - | - | | submitLoading | 查询按钮的加载中状态 | boolean | - | - | | submitBtnText | 查询按钮的文本 | string | - | 查询 | | resetBtnText | 重置按钮的文本 | string | - | 重置 | | resetBtnCallback | 重置按钮点击事件的回调函数，在重置了搜索条件之后执行 | function | - | - |

• 支持内部组件 select-option,itemType === 'selects'
• 支持内部组件 major,itemType === 'major'

Slots

| slot名称 | 说明 | | ---- |-----| | form | table 上部展示一个搜索区域，该slot下通过scope可以访问到两个属性：loading（查询中的loading状态值），search（搜索方法）| | prepend | table中，在最左边添加的列 | | append | table中，在最右边添加的列，一般可放置操作列 |

Events

| 事件名 | 说明 | 参数 | | ---- |-----| ----- | | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | | selection-change | 当选择项发生变化时会触发该事件 | selection | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event | | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event | | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event | | cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event | | row-click | 当某一行被点击时会触发该事件 | row, event, column | | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件| row, event | | row-dblclick | 当某一行被双击时会触发该事件 | row, event | | header-click | 当某一列的表头被点击时会触发该事件 | column, event | | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } | | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters | | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow | | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event | | expand (v1.x) | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded | | expand-change (v2.x) | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |

注意：我们还定义了一些固定的方法名称，详情请看源码

使用

<search-form-table
        ref="searchForm"
        :columns="formOptions.columns"
        :headers="formOptions.params"
        :form-options="formOptions"
        :selectionShow="true"
        :url="formOptions.url"
        @searchHandler="searchProcedure"
        @getListSuccess="getListSuccess"
        @selection-change="handleSelectionChange"
        @add="grant"
        @edit="noGrant">
        <!-- 可以手动添加多列 -->
        <el-table-column slot="prepend" label="操作" align="center" min-width="140">
          <template scope="scope">
            <el-button size="small" type="info" @click="show(scope.row)">查看
            </el-button>
            <el-button size="small" type="warning" @click="edit(scope.row)">修改
            </el-button>
          </template>
        </el-table-column>
        <!-- 对列的位置做修改调换 -->
        <template scope="scope" slot="rowConter">
            {{scope.row.**}
          </template>
      </search-form-table>

formOptions: {
          url: this.$globlURLPrefix.daily + "/allowance/list",
          groupBtn: [
            {text: '发放', btnEvn: 'add',},
            {text: '不发放', btnEvn: 'edit',}
          ],
          forms: [
            {prop: 'userName', label: '姓名:', itemType: 'input', placeholder: '姓名', value: ''},
            {prop: 'depId', label: '科室:', type: 'byUserType', itemType: 'selects', placeholder: '科室', value: '', options: '', userId: ''
            },
            {prop: 'provideMonth', label: '发放年月:', itemType: 'month', value: '',},
            {prop: 'userType', label: '生源类型:', itemType: 'select', value: '',options: stateOption }
          ],
          columns: [
            { prop: 'userName', label: '姓名', minWidth: 200 },
            { prop: 'userSchool', label: '学校', minWidth: 180 },
            {prop: 'userMajor', label: '专业', minWidth: 200,},
            { prop: 'depName', label: '科室', minWidth: 180 ,},
            { prop: 'provideMonth', label: '发放月份', minWidth: 120 },
            {prop:'provideAmount',label: '应发金额', minWidth: 120,},
            { label: '状态', slotName:'rowConter',}, // 
            { prop: 'provideStatus', label: '状态', filter: 'typeText',}, // 
          ]
        },

methods: {


        // 对当前页面做处理，如果没有特殊需要处理的提交字段，不需要
        //该方法为 如果在查询字段种有特殊字符需要处理的，在此处理 并在此页面调用
      searchProcedure() {
              let obj = {};
              this.formOptions.forms.map(item => {
                if (item.prop) {
                  obj[item.prop] = item.value
                }
              })
              let params = obj
              params.provideMonth = this.conductDate(params.provideMonth, 'yyyy-MM');
              this.$refs.searchForm.fetchHandler(params)
            },

    // 该方法为数据请求后返回的结构，res直接接收，默认是 res.data||[] 如果是data下的 需要单独传递
    getListSuccess(res){
      this.$refs.searchForm.getListSuccess(res.data.list)
    },

      /*
       * checkbox 选择后触发事件
       * @param val Array 存在所有的选择每一个行数据
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      }