mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
add page table method
This commit is contained in:
JiwenBai
parent
0e7a73ba6e
commit
ab5b29ac60
@ -1,5 +1,7 @@
|
||||
# Advanced Table
|
||||
|
||||
<!--single-column-->
|
||||
|
||||
```demo
|
||||
basic
|
||||
column
|
||||
@ -8,4 +10,4 @@ senior-usage
|
||||
slot-usage
|
||||
table-methods
|
||||
table-props
|
||||
```
|
||||
```
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
:data="data"
|
||||
max-height="300px"
|
||||
:search="search"
|
||||
:pagination="{total:data.length,limit:10,custom:true}"
|
||||
:pagination="pagination"
|
||||
@on-change="onChange"
|
||||
@on-filter-change="onFilterChange"
|
||||
max-width="480px"
|
||||
:max-width="480"
|
||||
>
|
||||
<div slot="table-operation-batch-left">
|
||||
<n-button size="small" @click="clear">
|
||||
@ -163,6 +163,15 @@ export default {
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pagination() {
|
||||
return {
|
||||
total: this.data.length,
|
||||
limit: 10,
|
||||
custom: true
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.table.setParams({
|
||||
filter: { age: [15] },
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Slot Usage
|
||||
|
||||
```html
|
||||
<n-advance-table
|
||||
:columns="columns"
|
||||
@ -8,75 +9,46 @@
|
||||
:pagination="{total:data.length,limit:10}"
|
||||
@on-change="onChange"
|
||||
>
|
||||
<div
|
||||
slot="table-operation-batch-left"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;">
|
||||
table-operation-batch-left
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="table-operation-batch-right"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation-batch-right
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
slot="table-operation"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="table-operation-search-right"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation-search-right
|
||||
</div>
|
||||
</div>
|
||||
<template #append>
|
||||
<div style="text-align:center;">slot name: append</div>
|
||||
</template>
|
||||
</n-advance-table>
|
||||
```
|
||||
|
||||
```js
|
||||
const items = [
|
||||
{
|
||||
label: 'greater than 15',
|
||||
label: "greater than 15",
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: 'less then 14',
|
||||
label: "less then 14",
|
||||
value: 14
|
||||
}
|
||||
]
|
||||
];
|
||||
const sex = [
|
||||
{
|
||||
label: 'male',
|
||||
value: 'male'
|
||||
label: "male",
|
||||
value: "male"
|
||||
},
|
||||
{
|
||||
label: 'female',
|
||||
value: 'female'
|
||||
label: "female",
|
||||
value: "female"
|
||||
}
|
||||
]
|
||||
const _columns3 = ($this) => {
|
||||
];
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
title: "Name",
|
||||
key: "name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
title: "Age",
|
||||
key: "age",
|
||||
sortable: true,
|
||||
sorter (a, b) {
|
||||
return a.age - b.age
|
||||
sorter(a, b) {
|
||||
return a.age - b.age;
|
||||
},
|
||||
// filterMultiple: true,
|
||||
filterItems: items,
|
||||
@ -84,34 +56,34 @@ const _columns3 = ($this) => {
|
||||
// value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
|
||||
switch (value[0]) {
|
||||
case 15:
|
||||
return record.age > 15
|
||||
return record.age > 15;
|
||||
case 14:
|
||||
return record.age < 14
|
||||
return record.age < 14;
|
||||
}
|
||||
},
|
||||
render: (h, params) => {
|
||||
return <b>{params.row.age}</b>
|
||||
return <b>{params.row.age}</b>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Sex',
|
||||
key: 'sex',
|
||||
title: "Sex",
|
||||
key: "sex",
|
||||
onFilter: (values, record) => {
|
||||
return values.includes(record.sex)
|
||||
return values.includes(record.sex);
|
||||
},
|
||||
filterMultiple: true,
|
||||
asyncFilterItems () {
|
||||
asyncFilterItems() {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
Math.random() > 0.6
|
||||
? resolve(sex)
|
||||
: reject(new Error('network error'))
|
||||
}, 1000)
|
||||
})
|
||||
: reject(new Error("network error"));
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '#',
|
||||
title: "#",
|
||||
render: (h, params) => {
|
||||
return (
|
||||
<n-button
|
||||
@ -121,15 +93,15 @@ const _columns3 = ($this) => {
|
||||
>
|
||||
delete
|
||||
</n-button>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
export default {
|
||||
components: {},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
data() {
|
||||
const columns = _columns3(this);
|
||||
|
||||
return {
|
||||
columns,
|
||||
@ -138,42 +110,42 @@ export default {
|
||||
search: {
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Age', value: 'age' }
|
||||
{ label: "Name", value: "name" },
|
||||
{ label: "Age", value: "age" }
|
||||
],
|
||||
onSearch: (key, word, record) => {
|
||||
switch (key) {
|
||||
case 'age':
|
||||
return record['age'] === +word
|
||||
case 'name':
|
||||
return record['name'].includes(word)
|
||||
case "age":
|
||||
return record["age"] === +word;
|
||||
case "name":
|
||||
return record["name"].includes(word);
|
||||
}
|
||||
},
|
||||
placeholder: 'search in local data'
|
||||
placeholder: "search in local data"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.data = this.getData()
|
||||
mounted() {
|
||||
this.data = this.getData();
|
||||
},
|
||||
methods: {
|
||||
handleDelete (params) {
|
||||
let index = params._index
|
||||
this.data.splice(index, 1)
|
||||
this.$NMessage.success('Delete successfully', { duration: 2000 })
|
||||
handleDelete(params) {
|
||||
let index = params._index;
|
||||
this.data.splice(index, 1);
|
||||
this.$NMessage.success("Delete successfully", { duration: 2000 });
|
||||
},
|
||||
getData (args) {
|
||||
let d = new Array(20).fill(0)
|
||||
getData(args) {
|
||||
let d = new Array(20).fill(0);
|
||||
d = d.map((item, idx) => {
|
||||
return {
|
||||
name: 'xiaobai' + idx,
|
||||
name: "xiaobai" + idx,
|
||||
age: Math.ceil(Math.random() * 20),
|
||||
sex: Math.random() > 0.5 ? 'male' : 'female'
|
||||
}
|
||||
})
|
||||
return d
|
||||
sex: Math.random() > 0.5 ? "male" : "female"
|
||||
};
|
||||
});
|
||||
return d;
|
||||
},
|
||||
onChange (args) {
|
||||
onChange(args) {
|
||||
/**
|
||||
* "filter": {
|
||||
"age": {
|
||||
@ -207,11 +179,11 @@ export default {
|
||||
}
|
||||
*/
|
||||
},
|
||||
clear () {
|
||||
clear() {
|
||||
// 清除所有的Filter选项,会触发onchange事件
|
||||
this.$refs.table.setParams({})
|
||||
this.$NMessage.info('clear all filters', { duration: 5000 })
|
||||
this.$refs.table.setParams({});
|
||||
this.$NMessage.info("clear all filters", { duration: 5000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
# Methods
|
||||
|
||||
```html
|
||||
<n-advance-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
/>
|
||||
<n-advance-table :columns="columns" :data="data" />
|
||||
```
|
||||
|
||||
```js
|
||||
const _columns3 = ($this) => {
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
title: "名称",
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc'
|
||||
title: "说明",
|
||||
key: "desc"
|
||||
},
|
||||
{
|
||||
title: '参数',
|
||||
key: 'params',
|
||||
render (h, params) {
|
||||
const arr = params.row.params.map((item) => {
|
||||
return <li>{item.name} <pre>{item.desc}</pre></li>
|
||||
})
|
||||
return (
|
||||
<ul>
|
||||
{arr}
|
||||
</ul>
|
||||
)
|
||||
title: "参数",
|
||||
key: "params",
|
||||
render(h, params) {
|
||||
const arr = params.row.params.map(item => {
|
||||
return (
|
||||
<li>
|
||||
{item.name} <pre>{item.desc}</pre>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
return <ul>{arr}</ul>;
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
const data = [
|
||||
{
|
||||
name: 'setParams',
|
||||
desc: '可以在mounted里setParams设置初始的sort,page,filter,search等,此操作会触发on-change事件,请在on-change里进行数据更新',
|
||||
name: "setParams",
|
||||
desc:
|
||||
"可以在mounted里setParams设置初始的sort,page,filter,search等,此操作会触发on-change事件,请在on-change里进行数据更新",
|
||||
params: [
|
||||
{
|
||||
name: 'filterData',
|
||||
name: "filterData",
|
||||
desc: `
|
||||
{
|
||||
filter: { age: [15] } or null,
|
||||
@ -48,34 +48,31 @@ const data = [
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'selectRow',
|
||||
desc: '可以在mounted里selectRow来进行选中某一行,当为字符串all时,选中当前显示所有行,当为数组时,选中行号-1的行(注意data数据要已经存在)',
|
||||
name: "toggleRowSelection",
|
||||
desc:
|
||||
"可以在mounted里selectRow来进行选中某一行,当为字符串all时,选中当前显示所有行,当为数组时,选中行号-1的行(注意data数据要已经存在)",
|
||||
params: [
|
||||
{
|
||||
name: 'rowIndexs Array|String',
|
||||
name: "rowIndexs Array, selected = true|false",
|
||||
desc: `
|
||||
[0,1,2]
|
||||
all
|
||||
`
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
];
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
components: {},
|
||||
data() {
|
||||
const columns = _columns3(this);
|
||||
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
};
|
||||
```
|
||||
|
||||
@ -16,69 +16,114 @@
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
title: '属性',
|
||||
key: 'name',
|
||||
title: "属性",
|
||||
key: "name",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc',
|
||||
title: "说明",
|
||||
key: "desc",
|
||||
width: 500,
|
||||
render(h, params) {
|
||||
return <pre class="n-table-props-desc">{params.row.desc}</pre>
|
||||
return <pre class="n-table-props-desc">{params.row.desc}</pre>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
title: "类型",
|
||||
key: "type",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
key: 'default',
|
||||
title: "默认值",
|
||||
key: "default",
|
||||
width: 500,
|
||||
render(h, params) {
|
||||
return <pre class="n-table-props-desc">{params.row.default}</pre>
|
||||
return <pre class="n-table-props-desc">{params.row.default}</pre>;
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
};
|
||||
const data = [
|
||||
{
|
||||
name: 'columns',
|
||||
desc: '表格列配置项',
|
||||
type: 'Array',
|
||||
name: "columns",
|
||||
desc: "表格列配置项",
|
||||
type: "Array",
|
||||
default: `[]`
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
desc: '表格是否加载中',
|
||||
type: 'boolean',
|
||||
name: "loading",
|
||||
desc: "表格是否加载中",
|
||||
type: "boolean",
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'max-height',
|
||||
desc: '最大高度,超出后会固定头部,并显示滚动条',
|
||||
type: 'number | string',
|
||||
name: "max-width",
|
||||
desc: "表格最大宽度,超出显示横向滚动条",
|
||||
type: "[String|Number]",
|
||||
default: `unset`
|
||||
},
|
||||
{
|
||||
name: "max-height",
|
||||
desc: "最大高度,超出后会固定头部,并显示滚动条",
|
||||
type: "number | string",
|
||||
default: `auto`
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
desc: '显示的结构化数据',
|
||||
type: 'Array',
|
||||
default: '[]'
|
||||
name: "data",
|
||||
desc: "显示的结构化数据",
|
||||
type: "Array",
|
||||
default: "[]"
|
||||
},
|
||||
{
|
||||
name: 'row-class-name',
|
||||
name: "row-class-name",
|
||||
desc: `行的css className
|
||||
当为Function时传入参数是
|
||||
- {row,_index} 行数据以及在源data数据中的索引
|
||||
- index行索引`,
|
||||
type: '[Array, String, Object, Function]',
|
||||
type: "[Array, String, Object, Function]",
|
||||
default: `''`
|
||||
},
|
||||
{
|
||||
name: 'search',
|
||||
name: "pagination",
|
||||
desc: "分页功能",
|
||||
type: "Object, Boolean",
|
||||
default: `
|
||||
example1: 远程分页触发on-change事件
|
||||
"pagination": {
|
||||
"total": 20,//items总数
|
||||
"limit": 10,//每页显示数量
|
||||
"custom": true,
|
||||
pageSlot:5,
|
||||
quickJumper:true
|
||||
},
|
||||
-----------
|
||||
example2: 本地分页
|
||||
"pagination": {
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
},
|
||||
`
|
||||
},
|
||||
{
|
||||
name: "minHeight",
|
||||
desc: "最小高度",
|
||||
type: "number | string",
|
||||
default: `unset`
|
||||
},
|
||||
{
|
||||
name: "maxHeight",
|
||||
desc: "最大高度,超出后会固定头部,并显示滚动条",
|
||||
type: "number | string",
|
||||
default: `auto`
|
||||
},
|
||||
{
|
||||
name: "被废弃的onChange",
|
||||
desc: "同event中的on-change,未来将会被废弃!",
|
||||
type: "Function",
|
||||
default: `()=>{}`
|
||||
},
|
||||
{
|
||||
name: "被废弃的search",
|
||||
desc: `是否显示搜索,如果传入一个Object格式需要如下:
|
||||
example1: 本地搜索
|
||||
{
|
||||
@ -113,58 +158,21 @@ const data = [
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
`,
|
||||
type: 'Object,Boolean',
|
||||
type: "Object,Boolean",
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'pagination',
|
||||
desc: '分页功能',
|
||||
type: 'Object, Boolean',
|
||||
default: `
|
||||
example1: 远程分页触发on-change事件
|
||||
"pagination": {
|
||||
"total": 20,//items总数
|
||||
"limit": 10,//每页显示数量
|
||||
"custom": true
|
||||
},
|
||||
-----------
|
||||
example2: 本地分页
|
||||
"pagination": {
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
},
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'onChange',
|
||||
desc: '同event中的on-change,未来将会被废弃!',
|
||||
type: 'Function',
|
||||
default: `()=>{}`
|
||||
},
|
||||
{
|
||||
name: 'minHeight',
|
||||
desc: '最小高度',
|
||||
type: 'number | string',
|
||||
default: `unset`
|
||||
},
|
||||
{
|
||||
name: 'maxHeight',
|
||||
desc: '最大高度,超出后会固定头部,并显示滚动条',
|
||||
type: 'number | string',
|
||||
default: `auto`
|
||||
}
|
||||
]
|
||||
];
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const columns = _columns3(this)
|
||||
const columns = _columns3(this);
|
||||
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
:fixed="fixed"
|
||||
@on-scroll="onBodyScrolll"
|
||||
/>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
import Scaffold from './src/main.vue'
|
||||
|
||||
Scaffold.install = function(Vue) {
|
||||
Scaffold.install = function (Vue) {
|
||||
Scaffold.Vue = Vue
|
||||
Vue.component(Scaffold.name, Scaffold)
|
||||
}
|
||||
|
||||
@ -73,7 +73,9 @@
|
||||
@on-checkbox-all="onAllCheckboxesClick"
|
||||
@on-sort-change="onSortChange"
|
||||
@on-filter="onFilter"
|
||||
/>
|
||||
>
|
||||
<slot name="append" />
|
||||
</base-table>
|
||||
<div
|
||||
v-if="fixedRightColumn.length"
|
||||
class="n-advance-table__fixed--right n-advance-table__fixed"
|
||||
@ -131,6 +133,7 @@
|
||||
:page-count="pageCount"
|
||||
:page-slot="paginationer.pageSlot || 5"
|
||||
:show-quick-jumper="paginationer.quickJumper || true"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -566,11 +569,11 @@ export default {
|
||||
this.checkBoxes = []
|
||||
})
|
||||
},
|
||||
selectRow (rowIndexs = []) {
|
||||
toggleRowSelection (rowIndexs = [], selected = true) {
|
||||
this.$nextTick(() => {
|
||||
if (rowIndexs === 'all') {
|
||||
this.showingData.forEach(item => {
|
||||
this.checkBoxes[item._index] = true
|
||||
this.checkBoxes[item._index] = selected
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
} else {
|
||||
@ -578,7 +581,7 @@ export default {
|
||||
rowIndexs.forEach(idx => {
|
||||
if (this.showingData[idx]) {
|
||||
const realIdx = this.showingData[idx]._index
|
||||
this.checkBoxes[realIdx] = true
|
||||
this.checkBoxes[realIdx] = selected
|
||||
}
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
@ -586,6 +589,9 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
page (pageNum) {
|
||||
this.currentPage = pageNum
|
||||
},
|
||||
sort (columnKey, order) {
|
||||
this.$set(this.sortIndexs, columnKey, order)
|
||||
},
|
||||
@ -621,7 +627,7 @@ export default {
|
||||
*/
|
||||
setParams ({ filter, sorter, page }) {
|
||||
if (sorter) {
|
||||
this.sort(sorter.key, sorter.type)
|
||||
this.sort(sorter.key, sorter.order)
|
||||
} else {
|
||||
this.clearSort()
|
||||
}
|
||||
@ -776,7 +782,10 @@ export default {
|
||||
const currentSortColumn = this.getCustomSorterData()
|
||||
const emitData = {
|
||||
filter: currentFilterColumn,
|
||||
sorter: currentSortColumn,
|
||||
sorter: {
|
||||
key: currentSortColumn.key,
|
||||
order: currentSortColumn.type
|
||||
},
|
||||
pagination: this.paginationer
|
||||
// search: this.currentSearchColumn
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user