# XFormTable

动态查询控件，进一步整合了XTable和XForm


## 何时使用

当需要一个通用的表单，表格一体化控件时


引用方式：

```javascript
import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'

export default {
  components: {
    XFormTable
  }
}
```



## 代码演示

```html
<x-form-table
  title="业务名称"
  :queryParamsName="queryParamsName">
</x-form-table>
```

## API

| 参数                 | 说明                      | 类型      | 默认值   |
|--------------------|-------------------------|---------|-------|
| title              | 业务名称                    | String  | ''    |
| queryParamsName    | 查询配置JSON文件名             | String  | null  |
| queryParamsJson    | 查询配置文件Json，用于查询配置生成器的预览 | Object  | null  |
| serviceName        | 配置所属命名空间                | String  | null  |
| logicName          | 通过logic获取表单表格配置         | String  | null  |
| logicParam         | 执行logic传递的参数            | Object  | null  |
| fixedQueryForm     | 固定查询表单,会和查询表单合并查询       | Object  | {}    |
| fixedAddForm       | 固定新增表单，会和新增表单合并         | Object  | {}    |
| isExports          | 是否显示导出按钮                | Boolean | true  |
| viewMode           | 是否为预览模式                 | Boolean | false |
| getDataParams      | 调用logic获取数据源的追加参数       | Object  | -     |
| @action            | 表格详情列的单击事件              | event   | -     |
| @afterSubmit       | 增改提交后的回调方法              | event   | -     |
| @afterDelete       | 删除提交后的回调方法              | event   | -     |
| @afterSearchSubmit | 查询提交后的回调方法              | event   | -     |
 | @afterQuery        | 表格查询后的回调方法              | event   | -     |
 | @selectRow         | 选择表格列后的回调方法             | event   | -     |
## 例子1
----
（基础使用）

```vue
<template>
  <x-form-table
    :queryParamsName="queryParamsName"
    @action="toDetail">
  </x-form-table>
</template>

<script>
import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'

export default {
  components: {
    XFormTable
  },
  data () {
    return {
      // 查询配置文件名
      queryParamsName: 'logQueryParams'
    }
  },
  methods: {
    toDetail (record, id) {
      console.debug("您选择了项："+ id)
    }
  }
}
</script>
```

注意事项
----

> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
