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

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

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

API 文档

属性

感谢 @zollero

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

Table column 属性

注：更多属性，请参考 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 属性

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

Slots

Events

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

使用

<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;
      },

      }