ObjStudio/obj-table-plus
Fork: 0 Star: 8 (更新于 1970-01-01 00:00:00)
license: MIT
Language: JavaScript .
基于vxe-table3.x的快速构建表格组件
最后发布版本: version1.2.7 ( 2022-10-10 11:37:37)
文档地址 https://objstudio.github.io/docs/
从1.0.10版本起,tabelCols不再需要配置id,如果配置了也会被组件内部生成的id所替换 从1.1.0版本起,tabelCols不再区分diy字段,将vxe原生的type与组件的type进行合并。
一、快速上手
0、通过npm安装
npm install obj-table-plus --save
1、引入组件并注册
import Vue from 'vue'
//引入必要的vxe-table 具体配置请查看官方文档
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
//引入必要的elementUI 具体配置请查看官方文档
import ElementUI from 'element-ui';
Vue.use(ElementUI);
import objTablePlus from 'obj-table-plus';
Vue.use(objTablePlus);
如果要使用jsx功能,请在babel.config.js中配置
//Babel 7+. Babel 6 支持, 使用vuejs/babel-plugin-transform-vue-jsx
//Vue 3支持使用@ant-design-vue/babel-plugin-jsx
module.exports = {
//presets中的插件用于配置语法,仅支持vue2.6
presets: [
//脚手架集成jsx增强语法
'@vue/cli-plugin-babel/preset',
[
//支持jsx
'@vue/babel-preset-jsx',
{
'injectH': false
}
]
]
}
项目依赖
//vue2官方表示:npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/babel-preset-jsx": "^1.2.4"
2、添加表格组件必要参数如下:
(1) tableData:[
{userId:"233",userName:"小明",userGender:"男",userAge:18},
...
// 树型 其他的看文档中有关于tableData的参数 https://xuliangzhan_admin.gitee.io/vxe-table
{userId:"234",userName:"小红",userGender:"女",userAge:19,children:[{...}]},
]
(2) tabelCols:[
{ id: "8", field: "createNumber",title:"生产批号", width: 120 },
{ id: "2", field: "patternCreateTime",title:"款号", width: 150 },
...
// 具体参考文档中的 <vxe-column/> 属性
]
*(3)tableProp 参考文档中关于<vxe-table/> 的属性
*(4)tableEvent {click:this.funcA,tap:this.funcB} 具体事件参中的<vxe-table/> 的事件
示例代码:
-
朴素表格——极致简单的表格
<template> <obj-table-plus ref="oTable" @query="queryList" v-model="tableData" :tableCols="tableCols" > </obj-table-plus> </template> <script> export default{ data(){ return { //表格数据 tableData:[], //定义表格结构 tableCols:[ { id: "1", field: "name",title:"姓名", width: 120 }, { id: "2", field: "age",title:"年龄", width: 120 }, { id: "3", field: "gender",title:"性别", width: 120 }, { id: "4", field: "phone",title:"联系电话", width: 120 } ] } }, methods:{ queryList(pageNo,pageSize){ request(pageNo,pageSize) .then(res=>{ this.$refs.oTable.complete(res.list,res.total/*此处要传入一个数据量总数*/); }) .catch(err=>{ this.$refs.oTable.complete(false); }) } } } </script>
-
自定义表格——携带自定义参数、jsx语法
<template> <obj-table-plus ref="oTable" @query="queryList" v-model="tableData" :tableCols="tableCols" :tableProp="tableProp" :tableEvent="tableEvent" > </obj-table-plus> </template> <script> export default{ data(){ return { //表格数据 tableData:[], //定义表格结构 tableCols:[ { id: "1", field: "name",title:"姓名", width: 120 }, { id: "2", field: "age",title:"年龄", width: 120 }, { id: "3", field: "gender",title:"性别", width: 120 }, { id: "4", field: "phone",title:"联系电话", width: 120 }, //自定义表格内容 { id:"5", field:"status", title:"状态", diy:true,//启用自定义渲染 type:"jsx",//类型是jsx渲染 render:({row})=>{ return ( <el-button type={row.status==0?'danger':'primary'}>{row.status==0?'异常':'正常'}</el-button> ) } } ], //表格参数 tableProp:{ "auto-resize": true, border: true, "row-id": "id", //带多选 "checkbox-config": { labelField: "", checkRowKeys: [10053, 23666] }, "max-height": "400px", "highlight-current-row": true, "show-overflow": true, }, //表格事件 tableEvent:{ "checkbox-change": this.selectChangeEvent, } } }, methods:{ queryList(pageNo,pageSize){ request(pageNo,pageSize) .then(res=>{ this.$refs.oTable.complete(res.list,res.total/*此处要传入一个数据量总数*/); }) .catch(err=>{ this.$refs.oTable.complete(false); }) }, selectChangeEvent(e){ // TODO...选中事件 } } } </script>
-
多级表格
<template> <obj-table-plus ref="oTable" @query="queryList" v-model="tableData" :tableCols="tableCols" :tableProp="tableProp" :tableEvent="tableEvent" > </obj-table-plus> </template> <script> export default{ data(){ return { //表格数据 tableData:[], //定义表格结构 tableCols:[ { id: "1", field: "name",title:"姓名", width: 120 }, { id: "2", field: "age",title:"年龄", width: 120 }, { id: "3", field: "gender",title:"性别", width: 120 }, { id: "4", field: "phone",title:"联系电话", width: 120 }, {id:"5", field:"location", title:"所在地区", childTableCols:[ {id:"51",field:"province",title:"省份"}, {id:"52",field:"city",title:"城市"}, {id:"53",field:"area",title:"区"}, ] } ], //表格参数 tableProp:{ "auto-resize": true, border: true, "row-id": "id", //带多选 "checkbox-config": { labelField: "", checkRowKeys: [10053, 23666] }, "max-height": "400px", "highlight-current-row": true, "show-overflow": true, }, //表格事件 tableEvent:{ "checkbox-change": this.selectChangeEvent, } } }, methods:{ queryList(pageNo,pageSize){ request(pageNo,pageSize) .then(res=>{ /*注意:这边的list要对应上children才可以正确渲染 具体参考vxe-table文档https://vxetable.cn/v3/#/table/grid/group*/ this.$refs.oTable.complete(res.list,res.total/*此处要传入一个数据量总数*/); }) .catch(err=>{ this.$refs.oTable.complete(false); }) }, selectChangeEvent(e){ // TODO...选中事件 } } } </script>
3、表格可选参数/插槽
(1)tableHandles 基于elementUI的表格操作按钮
(2)slot insert 表格上插槽 一般用于插入一个表单来进行检索
4、全局配置
在src目录下创建config文件夹,再config文件夹下创建obj-table.config.js作为配置文件,可以根据不同的项目自定义默认配置
module.exports={
//对应tableProp的默认值
'table-prop':{
"auto-resize": true,
border: true,
"row-id": "id",
//带多选
"checkbox-config": { labelField: "", checkRowKeys: [10053, 23666] },
"highlight-current-row": true,
"show-overflow": true,
"tree-config": { children: "children" },
},
//工具栏配置
'toolbar-prop':{custom:true},
//是否自动查询
'enable-auto-query':false,
//是否分页
'is-pagination':false
}
二、Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
tableData | 表格内容数据 | Array<Object> | [] | |
tableCols | 表格列的配置 | Array<Object> | [] | |
tableProp | 表格配置项 | Object | {} | |
tableEvent | 表格事件配置 | Object | {} | |
toolbarProp | 工具栏配置 | Object | {} | |
toolbarEvent | 工具栏事件 | Object | {} | |
isPagination | 是否分页 | Boolean | true | false |
三 、Method
方法名 | 说明 | 参数 |
---|---|---|
query | 请求参数 | 返回一个分页信息 pageNo,pageSize |
四、模板示例
敬请期待。。。
🎉 结束语
👋 我们需要你的贡献
我们深知它还有非常大的完善空间,所以我们始终欢迎你的贡献。
👣 如何贡献
可以通过提交 Issue 和 PR 的方式对「obj-table-plus」做出贡献或是提出需求,更详尽的步骤可以参考贡献指南。
最近版本更新:(数据更新于 1970-01-01 00:00:00)
2022-10-10 11:37:37 version1.2.7
2022-08-14 12:49:32 version1.2.4
2022-08-04 14:23:15 version1.2.0
2022-07-21 11:26:20 version1.1.16
2022-07-15 23:05:11 version1.1.13
2022-07-04 22:30:26 version1.1.12
2022-06-18 15:16:46 version1.1.9
2022-06-17 15:50:37 version1.1.8
2022-06-17 14:38:18 version1.1.7
2022-06-17 11:03:47 version1.1.6
ObjStudio/obj-table-plus同语言 JavaScript最近更新仓库
2024-11-05 19:13:47 jerryc127/hexo-theme-butterfly
2024-11-05 13:53:42 LiteLoaderQQNT/LiteLoaderQQNT
2024-11-03 02:40:36 chris81605/Degrees-of-Lewdity_Cheat_Extended
2024-11-01 21:55:46 projectdiscovery/nuclei-templates
2024-11-01 19:24:44 NumberSir/DoL-I18n-Build
2024-11-01 12:25:14 midoks/mdserver-web