# DgTable 表格

> 基于 elementUi 封装集成度更高的表格组件，实现 ApiCode 对接后台数据，集成滑窗、弹窗、表单，支持增删改查，自定义表格表头，自定义事件，自定义按钮配置。

::: demo 组件 Table 使用示例

```vue
<template>
  <el-row :gutter="24">
    <el-col :span="24">
      <el-card style="height: calc(100vh - 100px)">
        <div class="title_all"><strong class="title_left">table+form组件的demo</strong></div>
        <!-- 调用表格组件 -->
        <dg-table
          :tableData="tableData"
          :toolbarItems="toolbarItems"
          @selectionChange="selectMdmList"
          :tableItems="tableItems"
          :formItems="formItems"
        >
        </dg-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'roleList',
  data() {
    return {
      dialogTitle: '',
      selectMdmListData: {},
      dialogFormVisible: false,
      titleItems: [
        {
          title: '客户管理',
          editer: 'text',
          style:
            'font-size: 28px;font-weight: 300; color: #111111;margin-bottom: 20px;line-height: 30px;margin-right: 25px;',
        },
      ],
      toolbarItems: [
        { placeholder: '名称', value: 'USERNAME', editer: 'input' },
        // { editer: 'select', dimCode: 'testA', value: 'FLOW_TYPE' },
        { title: '查询', editer: 'search', type: 'primary' },
        { title: '新增', editer: 'add', type: 'primary' },
        { title: '操作', editer: 'button', type: 'primary', fn: this.otherOperation2 },
        {
          title: '批量通过',
          editer: 'button',
          fn: this.otherOperation2,
          style: 'position: fixed; bottom:6px;right:340px',
        },
        {
          title: '批量不通过',
          editer: 'button',
          fn: this.otherOperation3,
          style: 'position: fixed;bottom:6px;right:240px',
        },
      ],
      tableItems: [
        { title: '', type: 'selection', width: 50 },
        { field: '', title: '序号', type: 'index', width: 50 },
        { field: 'USERNAME', title: '用户名' },
        { field: 'USERCNNAME', title: '中文名' },
        { field: 'PASSWORD', title: '密码' },
        { field: 'SEX', title: '性别', render: this.renderSex },
        { field: 'ROLE', title: '角色' },
        { field: 'REMARK', title: '备注', overflow: true },
        {
          title: '操作',
          width: 210,
          fixed: 'right',
          actions: [
            { title: '修改', fn: 'edit', type: 'primary' },
            { title: '删除', fn: 'del', type: 'danger' },
            { title: '操作', fn: this.otherOperation1, type: 'success' },
          ],
        },
      ],
      tableData: [
        {
          USERNAME: 'xxx',
          USERCNNAME: '是第三方的',
          PASSWORD: '123456',
          SEX: 'man',
          ROLE: 'xx',
          REMARK: '111',
        },
      ],
      formItems: [
        { label: '用户名', value: 'USERNAME', editer: 'input' },
        { label: '中文名：', value: 'USERCNNAME', editer: 'input' },
        { label: '密码：', value: 'PASSWORD', editer: 'input' },
        { label: '性别', value: 'SEX', editer: 'select', dimCode: 'SEX' },
        { label: '角色：', value: 'ROLE', editer: 'input' },
        { label: '备注：', value: 'REMARK', editer: 'textarea' },
      ],
    }
  },
  created() {},
  methods: {
    // 表格操作父组件映射子组件的方法体，传入子组件
    otherOperation1(action, row, index, $event) {
      console.log(action, row, index, $event)
    },
    // 操作栏操作父组件映射子组件的方法体，传入子组件
    otherOperation2(item, res, toolbarData) {
      console.log(item, res, toolbarData)
    },
    renderSex(row) {
      return row.SEX === 'man' ? '<span style="color: blue">男</span>' : '<span style="color: red">男</span>'
      // console.log(row)
    },
    // 获取选中记录
    selectMdmList(val) {
      console.log(val)
      this.selectMdmListData = val
    },
    //测试
    testData(item, res, toolbarData) {
      console.log(this.selectMdmListData)
    },
  },
}
</script>

<style scoped>
.title_left {
  margin-left: 10px;
  color: #409eff;
}

.title_all {
  margin-bottom: 15px;
  border-left: 10px solid #409eff;
}

.el-table__header .el-checkbox__inner:first-child {
  position: fixed;
  bottom: 13px;
  left: 217px;
}
</style>
```

:::
`

## API

| 属性            | 说明                             |   类型    | 默认值  |                            事例                             |
| --------------- | -------------------------------- | :-------: | :-----: | :---------------------------------------------------------: |
| apiCode         | 数据库对应 apiCode               | `String`  |    -    |
| queryTerms      | apiCode 查询数据时的过滤条件     | `String`  |    -    |             `queryTerms='command=init&limit=1'`             |
| tableData       | 双向绑定的表格数据               |  `Array`  |    -    |
| height          | 表格高度                         | `String`  |    -    |
| titleItems      | 页面标题                         |   `Arr`   |    -    |
| toolbarItems    | 操作栏配置                       |   `Arr`   |    -    |
| tableItems      | 表格配置                         |   `Arr`   |    -    | `[{title: '产品',editer: 'text',style: 'font-size: 28px;}]` |
| formItems       | 表单配置                         |   `Arr`   |    -    |
| pagination      | 是否显示分页                     | `Boolean` | `true`  |
| pageSize        | 每页显示条数                     | `Number`  |  `15`   |
| selectionChange | 多选记录方法                     |  `方法`   |    -    |
| rules           | 表单校验规则 ｜ `Object` ｜ -    |
| dialogWidth     | 弹窗宽度                         | `String`  |  `50%`  |
| border          | 表格是否带左右边框               | `Boolean` | `false` |
| labelPosition   | 表格中的表单各个输入框标题的位置 | `String`  |    -    |
| checkboxtion    | 是否开启底部全选框               | `Boolean` | `false` |

## `toolbar`配置属性说明

目前只支持输入框、下拉框、日期框、下拉菜单、自定义文本样式、自定义按钮、查询按钮、滑窗添加按钮、弹窗添加按钮

## `toolbar-text`表头自定义文本样式配置属性说明

| 属性   | 说明           |   类型   | 默认值 | 可选值 |
| ------ | -------------- | :------: | :----: | :----: | ------ |
| editer | 类型           | `String` |        |   -    | `text` |
| style  | 输入框内联样式 | `String` |        |   -    |
| title  | 文本内容       | `String` |        |   -    |

## `toolbar-input`表头输入框配置属性说明

| 属性        | 说明             |    类型    | 默认值 | 可选值 |
| ----------- | ---------------- | :--------: | :----: | :----: | ------- |
| editer      | 类型             |  `String`  |        |   -    | `input` |
| style       | 输入框内联样式   |  `String`  |        |   -    |
| placeholder | 输入框占位文本   |  `String`  |        |   -    |
| fn          | 回车键自定义方法 | `Function` |        |   -    |

## `toolbar-select`表头下拉框配置属性说明（可参考 dgSelect 组件）

| 属性          | 说明                                             |    类型    | 默认值 | 可选值  |                     事例                      |
| ------------- | ------------------------------------------------ | :--------: | :----: | :-----: | :-------------------------------------------: | --- | ---- |
| editer        | 类型                                             |  `String`  |        |    -    |                   `select`                    |
| style         | 输入框内联样式                                   |  `String`  |        |    -    |
| placeholder   | 输入框占位文本                                   |  `String`  |        |    -    |
| dimCode       | 数据库所对应的 dimCode 值                        |  `String`  |        |    -    |                   `select`                    |
| apiCode       | 数据库所对应的 apiCode 值                        |  `String`  |        |    -    |
| filterVal     | 使用 apiCdoe 加 dimCode 方式取下拉框值时的过滤值 |  `String`  |        |    -    |
| selectOptions | 直接传入的下拉框中的所有值                       |  `Array`   |        |    -    | `[{name: '1', id: 'a'},{name: '2', id: 'b'}]` |
| selectStr     | 直接传入的下拉框中的所有值                       |  `String`  |        |    -    |                     ```a                      | 1,b | 2``` |
| clearable     | 是否可以清空选项                                 | `Boolean`  |        | `false` |
| handleChange  | 下拉框选择后调用的自定义函数                     | `Function` |        |    -    |

## `toolbar-date`表头日期框配置属性说明

| 属性          | 说明                         |   类型    | 默认值 | 可选值 |
| ------------- | ---------------------------- | :-------: | :----: | :----: | ------ |
| editer        | 类型                         | `String`  |        |        | `date` |
| style         | 输入框内联样式               | `String`  |        |   -    |
| placeholder   | 输入框占位文本               | `String`  |        |   -    |
| pickerOptions | 当前时间日期选择器特有的选项 | `Obeject` |        |   -    |

## `toolbar-dropdown`表头下拉菜单配置属性说明

| 属性         | 说明                       |   类型    | 默认值 | 可选值  |
| ------------ | -------------------------- | :-------: | :----: | :-----: | ------------------------------------------------------- |
| editer       | 类型                       | `String`  |        |    -    | `dropdown`                                              |
| title        | 按钮名字                   | `String`  |        |    -    |
| style        | 输入框内联样式             | `String`  |        |    -    |
| type         | 按钮类型                   | `String`  |        |    -    | `primary / success / warning / danger / info / text` ｜ |
| icon         | 图标类名                   | `String`  |        |    -    |
| plain        | 是否朴素按钮               | `Boolean` |        | `false` |
| round        | 是否圆角按钮               | `Boolean` |        | `false` |
| circle       | 是否圆形按钮               | `Boolean` |        | `false` |
| disabled     | 是否禁用状态               | `Boolean` |        | `false` |
| dropdownMenu | 下拉菜单内容（value,name） |  `Array`  |        |    -    |

## `toolbar-button`表头按钮配置属性说明

| 属性     | 说明                                          |    类型    | 默认值 | 可选值  |
| -------- | --------------------------------------------- | :--------: | :----: | :-----: | ------------------------------------------------------- |
| editer   | 按钮自定义，内置好的按钮必须配置 apiCode 使用 |  `String`  |        |    -    | `button/add/draweradd/search`                           |
| style    | 按钮内联样式                                  |  `String`  |        |    -    |
| type     | 按钮类型                                      |  `String`  |        |    -    | `primary / success / warning / danger / info / text` ｜ |
| icon     | 自定义按钮图标类名                            |  `String`  |        |    -    |
| disabled | 是否禁用状态                                  | `Boolean`  |        | `false` |
| plain    | 是否朴素按钮                                  | `Boolean`  |        | `false` |
| round    | 是否圆角按钮                                  | `Boolean`  |        | `false` |
| circle   | 是否圆形按钮                                  | `Boolean`  |        | `false` |
| befFn    | 创建按钮前调用自定义方法                      | `Function` |        |    -    |
| fn       | 自定义按钮的自定义方法                        | `Function` |        |    -    |

## `tableItems`配置属性说明

| 属性       | 说明                                                                                                                                            |             类型              |       默认值        |          可选值          |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------: | :-----------------: | :----------------------: | ------- |
| title      | 列名                                                                                                                                            |           `String`            |                     |            -             |
| editer     | 表格可输入类型                                                                                                                                  |           `String`            |                     |            -             | `input` |
| field      | 对应列内容的字段名                                                                                                                              |           `String`            |                     |            -             |
| type       | 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 |           `String`            |          -          | `selection/index/expand` |
| width      | 对应列的宽度                                                                                                                                    |           `String`            |                     |            -             |
| overflow   | 当内容过长被隐藏时显示 tooltip）                                                                                                                |           `Boolean`           |       `true`        |
| align      | 对齐方式                                                                                                                                        |           `String`            |                     |          `left`          |
| fixed      | 列是否固定在左侧或者右侧，true 表示固定在左侧                                                                                                   |       `String/Boolean`        | `true, left, right` |
| sortable   | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件                                             |       `String/Boolean`        |       `false`       | `true, false, 'custom'`  | -       |
| actions    | 对应列为按钮操作列                                                                                                                              |           `String`            |                     |            -             |
| render     | 对应列调用渲染方法                                                                                                                              |          `Function`           |                     |            -             |
| renderPara | 对应列调用渲染方法时传入的参数                                                                                                                  | `String/Boolean/Array/Object` |                     |            -             |

## `tableItems-actions`按钮操作列配置增属性说明

| 属性     | 说明                                                        |    类型    | 默认值 | 可选值  |
| -------- | ----------------------------------------------------------- | :--------: | :----: | :-----: | ------------------------------------------------------- |
| title    | 按钮名字                                                    |  `String`  |        |    -    |
| type     | 按钮类型                                                    |  `String`  |        |    -    | `primary / success / warning / danger / info / text` ｜ |
| disabled | 是否禁用状态                                                | `Boolean`  |        | `false` |
| icon     | 图标类名                                                    |  `String`  |        |    -    |
| style    | 按钮内联样式                                                |  `String`  |        |    -    |
| plain    | 是否朴素按钮                                                | `Boolean`  |        | `false` |
| round    | 是否圆角按钮                                                | `Boolean`  |        | `false` |
| circle   | 是否圆形按钮                                                | `Boolean`  |        | `false` |
| fn       | 按钮点击调用函数                                            | `Function` |        |    -    | `del/edit/自定义函数`                                   |
| judge    | 根据 row(本行的数据)return 返回 true/false 判断是否需要按钮 | `Function` |        |    -    | -                                                       |

## `formItems`表单配置属性说明

集成 dgForm 表单组件，各属性说明参考 dgForm 表单组件

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.8（2019-09-24）

- [优化] 增删改查的封装

#### v1.0.9（2020-02-14）

- [优化] 批量多选说明

#### v1.0.9（2020-03-07）

- 完善文本

#### v1.0.9（2020-03-13）

- 表格中支持输入框