fui-element

一个基于VUE+element-ui表格的组件,该组件封装了axios请求和分页,可节约台后项目接口对接的时间以及降低容错率。

使用时需要手动引入以下组件：

1. axios
2. element-ui

基本用法

安装

$ npm i -s axios element-ui fui-element --save

在项目中引入element-ui依赖,具体引入方式参见https://element.eleme.cn/#/zh-CN/component/installation 你需要在你的入口文件中引入element相关的css文件。

全局使用main.js里面引用

$ import FuiTable from 'fui-element'
$ Vue.use(FuiTable)

使用说明

前后端分离,通过axios获取数据并进行展示处理。

ajax => 接口地址
serverParams => 条件查询对象 ，当对象变化时会自动进行数据更新
｛
    默认会有三个参数：
    page:0, //分页默认从0开始
    size:10,//每页显示条数
    draw:1 //传给后端的标记，每记查询会自动增1
｝
pagination-layout => 分页显示参数，参照element
httpInstance =>  这是axios状态处理，如果你需要对其进行处理，可动态传入值
dataType => 返回的数据列表{默认list}
totalType => 返回的数据总数量{默认total}

如main.js：
import request from "./utils/http"; //这里引入axios
Vue.prototype.httpInstance = request;
则：httpInstance='httpInstance'

后端JSON格式规范(只能接收以下格式数据)

    data:{
        list:[ //列表数据
            {
                name:'张三'
            }
        ],
        total:25 //总条数
    }
    

示例

<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:'名字查询'
      }
    }
}
    

更新历史

1.1.0 与1.0.4没有太大区别，列表数据多了个data层级，注意按需要获取不同的包  <br>
1.0.4 动态获取后端返回的列表及总条数，扩大适用范围  <br>
1.0.3 优化无法切换分页问题 1.0.0 初始版本  <br>

维护者

@caojianjun。