2.0.8 • Published 2 years ago
fui-table v2.0.8
fui-table
一个基于 VUE+element-ui 表格的组件,该组件封装了 axios 请求和分页,可节约台后项目接口对接的时间以及降低容错率。
可使用以下组件:
fui-table fui-select
基本用法
安装
$ npm i -s axios element-ui fui-table --save
全局使用 main.js 里面引用
$ import FuiTable from 'fui-table'
$ Vue.use(FuiTable)
使用说明
. fui-table 使用说明 前后端分离,通过 axios 获取数据并进行展示处理。
ajax => 接口地址
serverParams => 条件查询对象 ,当对象变化时会自动进行数据更新
{
默认会有三个参数:
page:0, //分页默认从 0 开始
size:10,//每页显示条数
draw:1 //传给后端的标记,每记查询会自动增 1
}
height =>固定列和表头
pagination-layout => 分页显示参数,参照 element
httpInstance => 这是 axios 状态处理,如果你需要对其进行处理,可动态传入值
```
如 main.js:
import request from "./utils/http"; //这里引入 axios
Vue.prototype.httpInstance = request;
则:httpInstance='httpInstance'
后端 JSON 格式规范(只能接收以下格式数据)
data{
content:[ //列表数据
{
name:'张三'
}
],
totalElements:25 //总条数
}
示例
```bash
<fui-table ref="List" :ajax="url"
pagination-layout="total, sizes, prev, pager, next, jumper"
:serverParams="searchObj"
>
<el-table-column prop="name" label="姓名"/>//fui-table 中间段可直接用 element 组件即可,没有变化
</fui-table>
更新列表(常用于局部更新后调用)
this.$refs.List.getFuilist()
ref 可以自定义 本示例为 List
接收参数写法如下
data() {
return {
url: `${process.env.VUE_APP_ROOT}/user`,
searchObj: {
keywords:'名字查询'
}
}
}
. fui-select 使用说明
<fui-select mtype="post" httpInstance="api" :serverParams="listpost" :ajax="url"
></fui-select>
也可以引入静态
<fui-select :fuiData="fuiData"></fui-select>
ajax--接口地址
mtype--不传默认为 get 方法
listpost -- 参数
httpInstance --包装方法
label ---显示值[默认为 label]
value --触发值[默认为 value]
fuiData--静态数据
更新历史
2.0.8 修复参数丢失问题
2.0.7 解决下拉菜单 GET 方式获取出错问题
2.0.6 更改搜索时分页不变动问题
2.0.5 更改一些错误提示
2.0.4 增加 el-table 的所有属性,可放心使用-替换为驼峰命名格式
2.0.3 解决下拉自定义处理错误
2.0.2 增加了固定列和表头
2.0.1 增加了下拉列表组件
2.0.0 算是一个比较完善的版本,欢迎使用,若有疑问可加我微信aihgbac
1.1.0 更改分页处理错误-已可正常使用,算是第一个完善版,大家放心使用
1.0.9 将 log 数据去除,优化初始进入页面查询延时问题
1.0.8 更改输出数据不正确问题
1.0.0~1.0.7 初始版本