通用配置表格

用于搭建简单的表单表格，支持分页能力。可以通过简单的配置实现分页表格

特点

• 简单配置
• 易用

在线demo

e.g. https://codepen.io/mr-wang007s/pen/JjbjdRe

Attribute

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------- | --------------------- | ------------------------------- | ------ | ------ | | fetch-data | 查询接口地址/接口函数 | Function(formObj, pager) | - | - | | form-items | 必须参数 | Array | | | | table-columns | 必须参数 | Array | | |

table-columns

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------------------- | ------------------------------------------------------------ | --------------------------------------- | ------ | ------ | | type | 操作 | String | handle | 空 | | prop | 表格数据对应字段值 | String | | | | label | 字段对应中文名 | String | | | | formatter | 自定义字段渲染函数 | Function(row, column, cellValue, index) | - | - | | ...Table-column Attributes | Element-ui table中的[align, fixed, width] | | | |

form-items

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------ | --------------------------------------- | ------ | ------ | | label | 名称 | string | | | | key | 字段值 | | | | | options | 下拉框属性 [{label:xx, value: xx}] | Array | | | | type | 输入类型 | input/inputNumber/select/dateTime | | |

示例

<template>
    <div>
      <config-form-table :table-action="actionFun" :form-items="formItems" :table-columns="tableColumns"></config-form-table>
    </div>
</template>

var Main = {
  data() {
    return {
      formItems: [
        {
          label: "姓名",
          key: "name",
          type: 'input'
        }
      ],
      tableColumns: [
        { prop: "name", label: "姓名", align: "left", width: 200 },
        { prop: "date", label: "时间", align: "left", width: 200, formatter: this.formatterStatus },
        {
          prop: "address",
          label: "地址",
          align: "center"
        },
        {
          type: "handle",
          label: "操作",
          width: 80,
          buttons: [{ label: '查看', fn: this.handleView }]
        }
      ]
    }
  },
  methods: {
    handleView (row, key, value, index, scope) {
      alert(row)
    },
    formatterStatus (row, column, cellValue, index) {
      return "<span style='color:red'>"+cellValue+"</span>"
    },
    actionFun (formObj) {
      // e.g. 此处根据自己业务写入对应接口
      return new Promise((resolve, reject) => {
        axios.get('//mr-wang007s.xyz:3000/tables/'+formObj.pageIndex+'/'+formObj.pageSize+'/1').then(res => {
          resolve({
            dataList: res.data.tableList,
            total: res.data.total
          })
        })
      })
    }
  }
}