dev-simpler v1.0.0

dev-simpler

npm install dev-simpler

Version

vue >= 3.0

Use

main.js

import { createApp } from 'vue'
import App from './App.vue'
import simpler from 'dev-simpler'

createApp(App)
.use(simpler)
.mount('#app')

table :

数据格式 :
  * 注意：可以直接传入接口原始返回值，原始返回值内值的展示配置如下：

  ----------------- 1、表头格式 ---------------
    title: [ {
        title: '第一列',
        name: 'a',         // 传入 name 值需要和 传入数据对象中的 key 值相同
        handleModel: true,  // 有需要转换的字段可以传入对照表，将 handelModel 设为 true
        modelView: { key:value, key:value }  // 对照表，value 为转换后的值
        width: 100,     // 宽度
      }, {
        title: '第二列',
        name: 'b',
    *   child: 'c',    //如果传入的为一个对象，则要传入要展示对象内的字段名（ 没有可不传 ）
        date: true,       // 如果有数据为 日期 ， 需要传入 date 字段，为true时将转化成（YYYY-MM-DD）格式，默认为false
        format: 'YYYY-MM',  // 注意：date 默认为 YYYY-MM-DD 格式，如果需要自定义日期格式需传入 format 字段
      }, {
        effect: true,     // * 如果为 “操作” 栏，则需要设置 effect 为 true
        title: '操作',     // 列名
        operation: {      // 按钮（ 为true时显示，默认为false ，如果需要自定义按钮，则需要用插槽进行写入，见 第5条 ）
          change: true,   // 修改 按钮
          del: true,      // 删除 按钮
        }
      } ],

  ---------------- 2、数据格式 -----------------
    tableData: [ {
        a: 'qqqqqq',      // 传入 key 需要和 表头 传入的 name 值相同
        b: 'qqqqq',       //   注意：如果需要其他字段可以以 任意名称 传入，对列表显示无影响
        c: 'qqqq',
   *    d: 'qq' 或 [ a, b, c ] // 如果某个字段需要转换，目前支持的转换格式为上述两种，对照表格式为 { key:value, key:value }

      } ],

  ---------------- 3、emit -----------------
    update：修改
    del：删除

  ---------------- 4、序号 -----------------
    size：每页的数据数量（默认为10）
    page：当前页码（默认为1）

  ---------------- 5、slot -----------------
    name: operation  // 此插槽只存在于操作栏下（用于自定义按钮）