vic-table-manager v0.1.21

vic-table-manager

说明

​ 项目基于vue和element-ui，所以必须在您使用的项目总入口优先导入element-ui才能使用。

​ 别问我为什么写这个项目，我不想码代码，最多写一个对象传递进去，能达到我的目的就可以了，不能再多了，我要节省时间玩游戏享受人生...

​ 我在这个项目里面码那么多字是因为我很多次自己都已经忘记了我对象的结构是怎样的，所以写详细点自己能在以后使用的时候更快回想起来这个祖传代码是怎么用的而不至于总是骂自己。

项目安装

yarn add vic-table-manager

参数详解

1. vdata对象顶级参数：

2. table对象属性

3. forms对象属性

使用范例

1. 基础调用，

<template>
  <div class="demo1">
    <VicTableManager :vdata="vdata" />
  </div>
</template>

<script>
import VicTableManager from 'vic-table-manager'

export default {
  name: 'Demo1',
  components: {
    VicTableManager
  },
  data() {
    return {
      vdata: {
        url: '/api/news', // 数据获取的地址
        // 表格设置
        table: {
          fields: [ // 表格列设置
            { prop: 'id', label: 'ID', sortable: false, width: 80 },
            { prop: 'pid', label: '父级ID', sortable: false },
            { prop: 'title', label: '标题', sortable: false },
            { prop: 'image', label: '图片', sortable: false },
            { prop: 'introduce', label: '介绍', sortable: false },
            { prop: 'sort', label: '排序', sortable: false },
            { prop: 'create_time', label: '创建时间', sortable: false },
            { prop: 'update_time', label: '最后修改时间', sortable: false },
            { prop: 'operation', label: '操作', sortable: false, width: '400px' }
          ],
          delTag: 'delete_time'
        },
        // 表单设置
        forms: {
          form: {
            data: [
              { label: 'ID', formtype: 'input', name: 'id', state: null, value: '', placeholder: '请输入ID', hideadd: true, hidecopy: true, mustfill: true, disabled: true },
              { label: '新闻标题', formtype: 'input', name: 'title', state: null, value: '', placeholder: '请输入标题' },
              { label: '新闻简介', formtype: 'input', name: 'introduce', state: null, value: '', placeholder: '请输入新闻简介' },
              { label: '排序', formtype: 'input', name: 'sort', state: null, value: '', placeholder: '请输入排序' }
            ],
            valid: true
          }
        }
      }
    }
  }
}
</script>

<style>
.demo1 {
  width: 90%;
  padding-left: 5%;
}
</style>

2. 深入调用

<template>
  <div class="demo2">
    <VicTableManager :vdata="vdata" />
  </div>
</template>

<script>
import VicTableManager from 'vic-table-manager'

export default {
  name: 'Demo2',
  components: {
    VicTableManager
  },
  data() {
    return {
      vdata: {
        lang: 'en',
        notify: 'notify',
        ajax: {
          header: {
            'x-requested-with': 'XMLHttpRequest'
          },
          response: {
            error: 'msg'
          }
        },
        // 地址参数
        url: {
          url: '/api/news', // 基础URL
          editType: 'get', // 修改数据的提交方式
          copyType: 'get', // 克隆数据的提交方式
          deleteType: 'get', // 删除数据的提交方式
          params: {} // 基础URL上添加的其他参数
        },
        postDataAfter: {
          edit: 'update', // 修改数据提交之后的表格更新方式
          copy: 'refresh', // 修改数据提交之后的表格更新方式
          delete: 'refresh' // 修改数据提交之后的表格更新方式
        },
        // 返回结果中数据的分页参数设置
        dataPageParams: {
          datas: 'data',
          total: 'total'
        },
        // 表格设置
        table: {
          fields: [ // 表格列设置
            { prop: 'id', label: 'ID', sortable: false, width: 80 },
            { prop: 'pid', label: '父级ID', sortable: false },
            { prop: 'title', label: '标题', sortable: false },
            { prop: 'image', label: '图片', sortable: false },
            { prop: 'introduce', label: '介绍', sortable: false },
            { prop: 'sort', label: '排序', sortable: false },
            { prop: 'create_time', label: '创建时间', sortable: false },
            { prop: 'update_time', label: '最后修改时间', sortable: false },
            { prop: 'operation', label: '操作', sortable: false, width: '400px' }
          ],
          delTag: 'delete_time'
        },
        // 表单设置
        forms: {
          form: {
            data: [
              { label: 'ID', formtype: 'input', name: 'id', state: null, value: '', placeholder: '请输入ID', hideadd: true, hidecopy: true, mustfill: true, disabled: true },
              { label: '新闻标题', formtype: 'input', name: 'title', state: null, value: '', placeholder: '请输入标题' },
              { label: '新闻简介', formtype: 'input', name: 'introduce', state: null, value: '', placeholder: '请输入新闻简介' },
              { label: '排序', formtype: 'input', name: 'sort', state: null, value: '', placeholder: '请输入排序' }
            ],
            valid: true
          },
          addform: {
            width: '80%',
            labelWidth: '120px'
          }
        },
        // 分页参数
        pages: {
          pageAlign: 'right', // 分页组件放在左边
          perpage: 20, // 每页多少条数据
          pages: [10, 20, 50, 100, 200, 500, 1000], // 可选分页参数
          // 分页参数设置，此字段设置访问服务器时候添加到url中的分页参数
          params: {
            page: 'page', // 分页参数名
            perpage: 'list_rows' // 每页数据量参数名
          }
        },
        getDataAfter: (data) => { // 获取到数据之后的处理，处理之后返回给表格进行展示
          console.log(`formatGetData => `)
          console.log(data)
          let result = data
          console.log(result)
          return result
        }
      }
    }
  }
}
</script>

<style>
.demo2 {
  width: 90%;
  padding-left: 5%;
}
</style>

ChangeLog

0.1.21

1. 使用新版vic-form，使表单可用按钮传递数据出来进行处理；

0.1.19

1. 修正VicForm提交的值传递bug；

0.1.18

1. 增加表格展开和列隐藏功能；

0.1.11

1. 修正表格的rowClassName的绑定错误；

0.1.10

1. 增加modal的宽度设置和新的VicForm和VicTable的属性；

本项目

• NPM

依赖项目

• vic-form
• vic-table