config-form-table v0.0.4

通用配置表格

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

特点

• 简单配置
• 易用

在线demo

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

Attribute

table-columns

form-items

示例

<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
          })
        })
      })
    }
  }
}