1.1.0 • Published 2 years ago
fui-element v1.1.0
fui-element
一个基于VUE+element-ui表格的组件,该组件封装了axios请求和分页,可节约台后项目接口对接的时间以及降低容错率。
使用时需要手动引入以下组件:
- axios
- 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 //总条数 }
## 示例
```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
> 接收参数写法如下
```bash
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>