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 //总条数
}
示例

```sh
<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 初始版本

维护者

@caojianjun