服务端分页及自定义序号
应用场景，数据量十分庞大，不适合一次性返回给前端
示例代码
<template>
<div style="padding: 32px 64px">
<h1>服务端分页及自定义序号</h1>
<Table :columns="columns" :data="data" :loading="loading" border size="small"></Table>
<div style="text-align: center; margin:16px 0">
<!--.sync修饰符是一个语法糖，iView的Page组件内部是通过$emit('update:current')触发时间的-->
<Page
:total="total"
:current.sync="current"
show-sizer
@on-change="getData"
@on-page-size-change="handleChangeSize"></Page>
</div>
</div>
</template>
<script>
import $ from '../libs/utils'
export default {
data () {
return {
columns: [
{
type: 'index',
width: 60,
align: 'center',
// 用来修改序号的iView内置方法
indexMethod: (row) => {
// row._index打印出了0到9，通过数学计算可以算出每一个对应的序号，再返回出对应的序号
return (row._index + 1) + (this.size * this.current) - this.size;
}
},
{
title: '姓名',
key: 'name'
}
],
data: [],
loading: false,
total: 0,
current: 1, // 请求第几页
size: 10 // 一页请求多少条数据
}
},
methods: {
getData () {
if (this.loading) return; // 避免多次请求
this.loading = true;
$.ajax({ //utils中配置好了axios，这里只需要调用方法传递参数请求即可
method: 'get',
url: `/data/list/${this.current}/${this.size}` // 请求的参数。多少页，一页多少数据
}).then( res => {
// console.log(res.data);
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false;
})
},
handleChangeSize (val) { //点击多少size，这里赋值给size，每页就相应改变显示多少条
this.size = val;
// Vue内置函数：Vue当前的数据队列处理完成以后，再执行回调函数
// 这里使用$nextTick的原因是，如果选择了每页显示的条数后，iView会自动跳到第一页会发起一次请求数据
// 由于是异步的 请求的url中的参数this.size会出现错误导致请求的数据错误
// 所以我们必须使用这个内置函数等待this.size修改完后再请求数据
this.$nextTick(() => {
this.getData();
})
}
},
mounted () {
this.getData()
}
}
</script>
<style scoped>
</style>
服务端分页并排序、过滤
这里的过滤指的其实是，在请求的时候。在请求的时候就对服务端的数据进行了过滤。而不是在前端本地进行的过滤。
<template>
<div style="padding: 32px 64px;">
<h1>服务端分页并过滤</h1>
<Table
:columns="column"
:data="data"
:loading="loading"
border
size="small"
@on-sort-change="handleSortChange"
@on-filter-change="handleFilterChange"
></Table>
<div style="text-align: center; margin: 16px 0">
<Page :total="total" :current.sync="current" @on-change="getData"></Page>
</div>
</div>
</template>
<script>
import $ from '../libs/utils'
export default {
data () {
return {
total: 0,
current: 1,
loading: false,
sortType: 'normal', // 设置排序方式，这里设置为默认排序 normal || asc || desc
filterType: undefined, // 设置的过滤条件 undefined || 1 || 2
column: [
{
title: '号码',
key: 'number',
// sortable设置为true时，会直接对当前数据进行本地排序；设置为custom，则为自定义排序
sortable: 'custom'
},
{
title: '等级',
key: 'status',
// 表格内容展示的时候用Tag组件渲染，Tag组件手动设置传入的数据来渲染颜色
render: (h, { row }) => {
if (row.status === 1) {
return h('Tag', {
props: {
color: 'green'
}
}, '等级 1');
} else if (row.status === 2) {
return h('Tag', {
props: {
color: 'red'
}
}, '等级 2');
}
},
// 设置filters告诉我们的表格过滤的规则
filters: [
{
label: '等级 1',
value: 1
},
{
label: '等级 2',
value: 2
}
],
filterMultiple: false, // 设置为单选
// 这里设置的前端对本地数据的过滤
// filterMethod (value, row) {
// if (value === 1) {
// return row.status === 1;
// } else if (value === 2) {
// return row.status === 2;
// }
// }
// 这里设置的是对数据的过滤的类型设置，类型发给远程进行远程数据的过滤
filterRemote (value) {
// console.log(value);
this.filterType = value[0];
}
}
],
data: []
}
},
methods: {
handleSortChange ({columns ,key, order}) { // 传入的order是排序类型，升序降序默认
this.sortType = order;
this.current = 1;
this.getData();
},
handleFilterChange () { // 触发filterRemote属性,对远程的数据进行过滤
this.current = 1;
this.getData();
},
getData () {
if (this.loading) return;
this.loading = true;
$.ajax({
methods: 'get',
url: `data/list/${this.current}/${this.sortType}/${this.filterType}`
}).then(res => {
// console.log(res);
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false;
})
}
},
mounted () {
this.getData()
}
}
</script>
<style scoped>
</style>
前端分页并排序、过滤
在后端传过来的数据量不是很大的时候，我们可以在数据请求到本地之后，进行排序和过滤。相比于服务端过滤，这里我们使用了计算属性。（iView库本人也推荐）
<template>
<div style="padding: 32px 64px">
<h1>前端分页并排序、过滤</h1>
<Table
:data="dataWithPage"
:columns="column"
:loading="loading"
border
size="small"
@on-sort-change="handleSortChange"
@on-filter-change="handleFilterChange"
></Table>
<div style="margin: 16px 0;text-align: center">
<!--这里的total的值并不是服务端传过来的值，而是我们筛选后的值-->
<Page :total="limitData.length" :current.sync="current"></Page>
</div>
</div>
</template>
<script>
import $ from '../libs/utils'
export default {
data() {
return {
total: 0,
current: 1,
loading: false,
sortType: 'normal', // 设置排序方式，这里设置为默认排序 normal || asc || desc
filterType: undefined, // 设置的过滤条件 undefined || 1 || 2
column: [
{
title: '号码',
key: 'number',
// sortable设置为true时，会直接对当前数据进行本地排序；设置为custom，则为自定义排序
sortable: 'custom'
},
{
title: '等级',
key: 'status',
// 表格内容展示的时候用Tag组件渲染，Tag组件手动设置传入的数据来渲染颜色
render: (h, {row}) => {
if (row.status === 1) {
return h('Tag', {
props: {
color: 'green'
}
}, '等级 1');
} else if (row.status === 2) {
return h('Tag', {
props: {
color: 'red'
}
}, '等级 2');
}
},
// 设置filters告诉我们的表格过滤的规则
filters: [
{
label: '等级 1',
value: 1
},
{
label: '等级 2',
value: 2
}
],
filterMultiple: false, // 设置为单选
// 这里设置的前端对本地数据的过滤
filterMethod(value, row) {
if (value === 1) {
return row.status === 1;
} else if (value === 2) {
return row.status === 2;
}
}
// 这里设置的是对数据的过滤的类型设置，类型发给远程进行远程数据的过滤
filterRemote (value) {
// console.log(value);
this.filterType = value[0];
}
}
],
data: []
}
},
computed: {
// 这里的limitData就是我们处理筛选完的数据，用计算属性效果较好
limitData() {
let data = [...this.data] // 复制一下数据，保证不会直接修改原数据
if (this.sortType === 'asc') {
data = data.sort((a, b) => {
return a.number > b.number ? 1 : -1; // 返回值不直接加减做判断 这样写对浏览器的兼容性较好
})
}
if (this.sortType === 'desc') {
data = data.sort((a, b) => {
return a.number < b.number ? 1 : -1;
})
}
if (this.filterType === 1) {
data = data.filter(item => {
return item.status === 1;
})
} else if (this.filterType === 2) {
data = data.filter(item => {
return item.status === 2;
})
}
return data;
},
// 处理数据分页，依赖上面的计算属性
dataWithPage () {
const data = this.limitData;
const start = this.current * 10 - 10;
const end = start + 10;
return [...data].slice(start, end);
}
},
methods: {
handleSortChange({columns, key, order}) { // 传入的order是排序类型，升序降序默认
this.sortType = order;
this.current = 1;
// this.getData(); // 因为是在本地处理数据，因此不需要再次请求数据
},
handleFilterChange() { // 触发filterRemote属性,对远程的数据进行过滤
this.current = 1;
// this.getData();
},
getData() {
if (this.loading) return;
this.loading = true;
$.ajax({
methods: 'get',
url: `data/list`
}).then(res => {
// console.log(res);
this.data = res.data.data.list;
this.total = res.data.data.total;
this.loading = false;
})
}
},
mounted() {
this.getData()
}
}
</script>
<style scoped>
</style>
这里做了以上三个例子的demo：
https://github.com/AqingCyan/iView_Test，安装完依赖直接运行serve即可，路由跳转至 table1，table2，table3查看不同类型的表格
网友评论