vic-table-manager
v0.1.21
Published
using element ui, the table manager.
Downloads
4
Readme
vic-table-manager
说明
项目基于vue和element-ui，所以必须在您使用的项目总入口优先导入element-ui才能使用。
别问我为什么写这个项目，我不想码代码，最多写一个对象传递进去，能达到我的目的就可以了，不能再多了，我要节省时间玩游戏享受人生...
我在这个项目里面码那么多字是因为我很多次自己都已经忘记了我对象的结构是怎样的，所以写详细点自己能在以后使用的时候更快回想起来这个祖传代码是怎么用的而不至于总是骂自己。
项目安装
yarn add vic-table-manager
参数详解
- vdata对象顶级参数：
| 参数名 | 必填 | 类型 | 默认值 | 备注 | | -------------- | ----- | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | id | True | String | 'VicTableManager' | ID值，ref绑定值 | | lang | False | String | 'zh-CN' | 内置的语言版本有zh-CN、zh-TW、en三个，由于分页组件是直接调用的ElementUI，所以需要设置ElementUI的语种才能正常使用 | | notify | False | String | 'message' | 提示信息的载体，如果设置成'notify'就是使用ElementUI的notify组件提示，默认是message组件进行提示 | | url | True | String|Object | String时为''；Object时为：{url:'',saveUrl:'',copyUrl:'',editUrl:'',deleteUrl:'',enableUrl:启用数据接口,searchUrl:搜索数据地址1,searchPath:搜索数据地址2,params:{基础URL上添加的其他参数}, saveType: 'POST', copyType: 'POST', editType: 'PUT', deleteType: 'DELETE', enableType: 'DELETE' } | 获取数据的基础URL地址，为String时，新增+修改+删除+启用都是RESTful风格，使用相同的URL地址进行操作，如果有不同或者不是RESTful风格的接口，使用Object进行定义即可：{url:获取数据地址,saveUrl:新增数据接口,copyUrl:复制新增数据接口,editUrl:修改数据接口,deleteUrl:删除数据接口,enableUrl:启用数据接口,searchUrl:搜索数据地址1,searchPath:搜索数据地址2,saveType: 新增数据的提交方式, copyType: 克隆数据的提交方式, editType: 编辑数据的提交方式, deleteType: 删除数据的提交方式, enableType: 启用数据的提交方式}，注意：获取数据是Get提交，新增和复制新增是Post提交，修改数据是Put提交，删除和启用是Delete提交。搜索部分searchUrl可以直接指定搜索的url地址，搜索地址会是searchUrl+'/搜索字符串'，如果没有设置searchUrl，则会匹配url+'/'+searchPath+'/搜索字符串'进行数据搜索，如果searchPath也没有设置，则会默认按url+'/search/搜索字符串'进行数据搜索。 | | ajax | False | Object | { header: {}, response: {} } | 可设置组件ajax访问数据的http header，也可设置返回数据的结构体 | | pages | False | Object | {perpage: 10, pages: [10, 20, 50, 100, 200], pageMode:'default',pageAlign:'center',params: {page: 'page', perpage: 'list_rows'}} | 分页参数，访问服务器数据时用到和分页组件中的每页数据条数选择设置，{perpage: 每页展示数据条数, pages: 分页组件可选每页展示数据条数, pageMode:分页组件模式，有default和mini两种,pageAlign:分页对齐方式，有[left,center,right]三种,params: {page:服务器接收的页码参数名 perpage: 服务器接收的每页数量参数名}} | | dataPageParams | False | Object | { total: 'totalNum', totalPage: 'totalPage', currentPage: 'pageNum', perpage: 'pageSize', 'datas': 'content' } | 返回结果中数据的分页参数设置，对接服务器返回结果集的结构，如果您的结构不是默认的，则进行修改：{ total: 返回结果总数, totalPage: 返回结果总页数, currentPage: 当前页码, perpage: 每页结果数, 'datas': 结果集 } | | getDataAfter | False | Function | (data) => { return data} | 组件从服务器上Get指定的URL获取到数据之后可执行的函数，即在客户端优先处理数据之后再进行显示的函数 | | table | True | Object | { fields: [], btnAction:{}, btnActionBefore:{} } | 表格设置，具体参数参考vic-table项目说明，见表2，所有表格的方法需要使用ref绑定之后使用vue的ref的对象属性去调用表格的方法 | | forms | True | Object | { form:{valid: true},addform:{},editform:{},copyform:{},readform:{},btnAction:{},btnActionAfter:{} } | 表单设置，具体参数参考vic-form项目说明，见表3 | | formatData | False | Object | { add: (data) => { return data }, copy: (data) => { return data }, edit: (data) => { return data }, delete: (data) => { return data }, enable: (data) => { return data } } | 点击表单的提交按钮之后，提交表单数据到服务器之前对表单数据进行格式化处理的函数 | | postDataAfter | False | Object | { save: 'refresh', copy: 'refresh', edit: 'update', delete: 'refresh', enable: 'refresh' } | 提交表单数据成功之后的操作，默认均是刷新表格(refresh)，只有edit编辑数据为单条更新(update)，如果想修改默认的操作可直接在此对象进行设置 | | refreshTable | False | Boolean | False | 强制刷新表格数据，设置成true之后记得使用setTimeout函数将其重置为false | | | | | | |
- table对象属性
| 参数名 | 必填 | 类型 | 默认值 | 备注 | | --------------- | ----- | ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | btnAction | False | Object | {add: () => {}, edit: () => {}, copy: () => {}, read: () => {}, delete: () => {}, enable: () => {}} | 表格组件中点击按钮的动作，设置了这个btnActionBefore的设置就不会起作用了，此参数用于父组件直接接管VicTableManager的默认按钮事件，比如说不使用模态框而直接跳转到另外的路由中进行数据的修改新增等操作 | | btnActionBefore | False | Object | {add: () => {}, edit: () => {}, copy: () => {}, read: () => {}, delete: () => {}, enable: () => {}} | 表格组件中，在点击按钮之后，弹出模态框之前执行的事件，主要用于验证表格单条数据，不满足条件则返回false阻止模态框的弹出 | | | | | | |
- forms对象属性
| 参数名 | 必填 | 类型 | 默认值 | 备注 | | -------------- | ----- | ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | form | True | Object | {valid: false} | 通用的form，设置参数中隐藏控件需要使用hide+后缀，即hideadd或者hideedit或者hidecopy，valid属性可以设置其是否执行提交前验证表单 | | addform | False | Object | {} | 新增数据的表单，如果要隐藏控件直接使用hide即可 | | editform | False | Object | {} | 修改数据的表单，如果要隐藏控件直接使用hide即可 | | copyform | False | Object | {} | 克隆数据的表单，如果要隐藏控件直接使用hide即可 | | readform | False | Object | {} | 读取数据的表单，如果要隐藏控件直接使用hide即可 | | btnAction | False | Object | {add: () => {}, edit: () => {}, copy: () => {}, read: () => {}, delete: () => {}, enable: () => {}} | 各个表单中提交按钮的执行动作，设置了这个，默认的提交数据动作和btnActionAfter的设置就不会起作用了，此参数用于父组件直接接管VicTableManager的表单提交按钮的默认事件 | | btnActionAfter | False | Object | {add: () => {}, edit: () => {}, copy: () => {}, read: () => {}, delete: () => {}, enable: () => {}} | 表单组件中，在点击提交按钮返回正确的响应，关闭模态框之后执行的事件 | | | | | | |
使用范例
- 基础调用，
<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>
- 深入调用
<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
- 使用新版vic-form，使表单可用按钮传递数据出来进行处理；
0.1.19
- 修正VicForm提交的值传递bug；
0.1.18
- 增加表格展开和列隐藏功能；
0.1.11
- 修正表格的rowClassName的绑定错误；
0.1.10
- 增加modal的宽度设置和新的VicForm和VicTable的属性；