# XTable

动态表格控件，根据JSON配置生成一个完整的动态表格


## 何时使用

当需要一个动态生成的表格时


引用方式：

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

export default {
    components: {
      XTable
    }
}
```



## 代码演示

```html
<x-table
  v-if="loaded"
  :json-data="json"
  :queryParamsName="queryParamsName"
  @loadData="loadData"
  :form="form"
/>
```

## API

| 参数              | 说明                       | 类型     | 默认值  |
|-----------------|--------------------------|--------|------|
| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object | {}   |
| queryParamsName | 查询配置JSON文件名              | String | null |
| loadData        | 数据的加载事件                  | event  | -    |
| form            | 查询表单                     | Object | {}   |
| fixedQueryForm  | 固定查询表单,会和查询表单合并查询        | Object | {}   |
| @action         | 表格详情列的单击事件               | event  | -    |

## 例子1
----
（基础使用）

```vue
<template>
  <x-table
    v-if="loaded"
    :json-data="columnItemJson"
    :queryParamsName="queryParamsName"
    @loadData="loadData"
    @action="toDetail"
    :form="form"
  />
</template>

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

  export default {
    components: {
      XTable
    },
    data() {
      return {
        // 加载查询参数JSON配置文件是否完成
        loaded: false,
        // 从查询参数JSON配置中得到的生成表格列的JSON
        columnItemJson: undefined,
        // 表单
        form: {},
        // 查询配置文件名
        queryParamsName: 'instructQueryParams',
      }
    },
    created() {
      this.getQueryJson()
    },
    methods: {
      // 加载查询参数JSON配置文件
      getQueryJson() {
        this.columnItemJson = [
            {
              "scopedSlots":{
                "customRender":"id"
              },
              "slotType":"ellipsis",
              "dataIndex":"id",
              "width":108,
              "title":"编号",
              "slotValue":8
          },
          {
            "scopedSlots":{
              "customRender":"f_userinfo_code"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_userinfo_code",
            "width":164,
            "title":"用户编号",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_meternumber"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_meternumber",
            "width":164,
            "title":"表号",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_user_name"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_user_name",
            "width":164,
            "title":"用户姓名",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_address"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_address",
            "width":220,
            "title":"用户地址",
            "slotValue":24
          },
          {
            "scopedSlots":{
              "customRender":"f_instruct_type"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_instruct_type",
            "width":164,
            "title":"指令类型",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_instruct_title"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_instruct_title",
            "width":164,
            "title":"指令说明",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_instruct_state"
            },
            "slotType":"badge",
            "dataIndex":"f_instruct_state",
            "title":"指令状态",
            "slotKeyMap":"instructStateMap"
          },
          {
            "scopedSlots":{
              "customRender":"f_receive_state"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_receive_state",
            "width":164,
            "title":"响应结果",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"f_instruct_date"
            },
            "slotType":"dateTime",
            "dataIndex":"f_instruct_date",
            "width":160,
            "title":"生成时间"
          },
          {
            "scopedSlots":{
              "customRender":"f_inputtor"
            },
            "slotType":"ellipsis",
            "dataIndex":"f_inputtor",
            "width":164,
            "title":"操作人",
            "slotValue":16
          },
          {
            "scopedSlots":{
              "customRender":"action"
            },
            "slotType":"action",
            "dataIndex":"action",
            "title":"操作"
          }
        ]
        this.loaded = true
      },
      // 加载表格数据
      loadData (requestParameters, callback) {
        // 你可以在requestParameters中追加传递给后台的额外参数
        // 发起通用查询请求
        const result = query(requestParameters)
        // 将结果回调给表格
        callback(result)
      },
      // 点击操作列时的方法
      toDetail (record, id) {
        console.debug('你点击了操作列：'+record)
      }
    }
  }
</script>
```

注意事项
----

> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
>
> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置
```vue
<script>
  import { commonApi } from '@vue2-client/base-client/api/common'
  import Vue from 'vue'

  export default {
    data () {
      return {
        // 查询配置文件名
        queryParamsName: 'instructQueryParams'
      }
    },
    methods: {
      getConfig () {
        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
          this.formItemJson = res.formJson
          this.columnItemJson = res.columnJson
          this.loaded = true
        })
      }
    }
  }
</script>
```
