el data table
v1.23.2
axios自动请求，支持分页、树形数据结构、自定义搜索、自定义操作列，让rest api变得轻松？
该表使用@femessage/el-form-renderer来渲染表单。
中文文档
el-data-table是为了解决业务问题而创建的，所以里面设置了CRUD逻辑。
例如，开发user api，假设其相对路径如下：
/ api / v1 / usersRestful CRUD api 应该是：
GET / api / v1 / users ? page = 1 & size = 10默认数据结构
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}您可以自定义dataPath/totalPath。
如果hasPagination=false ，默认 dataPath 是payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : id那么只需要使用如下代码即可完成CRUD功能
< template >
< el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > < script >
export default {
data ( ) {
return {
tableConfig : {
url : '/example/users' ,
columns : [
{
prop : 'name' ,
label : '用户名'
}
] ,
searchForm : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
}
}
] ,
form : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >结果如下：
取回
创造
更新
删除
⬆返回顶部
将模板的内容移到脚本中意味着可以减少模板，并且可以将js提取到另一个文件中以进行复用。同时，js中的数据实际上是一段json，这意味着代码生成工具可以提供帮助。
⬆返回顶部
为什么要基于element-ui的el-table创建el-data-table？
我经常听到以下声音：
首先不得不说，el-table确实很灵活，但是在实现分页请求时，只有el-table是不够的，需要结合el-pagination组件。分页处理的大部分内容都是重复的。如果没有高级业务组件，我们就会到处得到重复的代码。
事实上，在管理或仪表板Web应用程序中，有很多CRUD操作，使用restful API。可以只用一个url来制作一个组件来完成CRUD功能。
其次，许多经验丰富的开发人员认为组件越灵活越好。
然而，对于缺乏经验的“新手”来说，他们对常见的业务场景并不熟悉。一些基本操作，例如表单验证、空间过滤、添加加载、异常处理，他们可能会忘记，从而导致错误。
对于一线业务开发人员来说，面对无穷无尽的开发任务，其实他们并不想处理重复的业务逻辑。他们只是想解放双手，早点下班。
在这种情况下，el-data-table诞生了。
⬆返回顶部
⬆返回顶部
⬆ 返回顶部
鼓励使用Yarn安装
yarn add @femessage/el-data-table⬆返回顶部
这是出于缩小的原因：通过这种方式构建您的应用程序、webpack 或其他捆绑器，只需将使用该组件的所有页面的依赖项捆绑到一个供应商中，而不是一个页面的一个供应商中
import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Form ,
FormItem ,
Loading ,
Pagination ,
Table ,
TableColumn ,
Message ,
MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios< template >
< el-data-table ></ el-data-table >
</ template >⬆返回顶部
⬆返回顶部
对于那些有兴趣为该项目做出贡献的人，例如：
请参阅我们的贡献指南。
⬆ 返回顶部
感谢这些优秀的人（表情符号键）：
征收 ？ ？ ？ | 唐纳德·沉 | 米菲·库珀 | 陈焕峰 | 埃维尔特 ？ | 阿尔文 ？ | 汉族 ？ |
坤之家 ？ | 埃德加 ？ | 巴雷特姆 | 阿禹。 | 卢俊伟 | 西杰夫 ？ | 杰克彩虹 ？ |
科尔马克X | 积雪的 | 海绵 ？ | 4方舟 | 红兵 | 帕彭尼 | 弹出对话框 ？ |
乔吉特 | 约洛菲特 ？ | 花在里 ？ |
该项目遵循所有贡献者规范。欢迎任何形式的贡献！
麻省理工学院
⬆返回顶部
