docs: add table filter doc & demo
This commit is contained in:
Justineo
parent
4b8ad76e60
commit
96f81ee0db
@ -18,6 +18,12 @@
|
|||||||
|
|
||||||
[[ demo src="/demo/table/advanced.vue" ]]
|
[[ demo src="/demo/table/advanced.vue" ]]
|
||||||
|
|
||||||
|
### 筛选
|
||||||
|
|
||||||
|
使用 `filter` 插槽来开启自定义筛选功能。
|
||||||
|
|
||||||
|
[[ demo src="/demo/table/filter.vue" ]]
|
||||||
|
|
||||||
### 内部滚动模式
|
### 内部滚动模式
|
||||||
|
|
||||||
允许启用内部滚动模式，以达到固定表头表底的效果。
|
允许启用内部滚动模式，以达到固定表头表底的效果。
|
||||||
|
|||||||
155
one/docs/demo/table/filter.vue
Normal file
155
one/docs/demo/table/filter.vue
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<article>
|
||||||
|
<section>
|
||||||
|
<h4>Layout</h4>
|
||||||
|
<veui-checkbox v-model="crowded">
|
||||||
|
Crowded layout
|
||||||
|
</veui-checkbox>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<veui-table
|
||||||
|
:ui="crowded ? 'crowded' : null"
|
||||||
|
:data="filteredData"
|
||||||
|
key-field="id"
|
||||||
|
>
|
||||||
|
<veui-table-column
|
||||||
|
field="id"
|
||||||
|
title="ID"
|
||||||
|
/>
|
||||||
|
<veui-table-column
|
||||||
|
field="name"
|
||||||
|
title="Name"
|
||||||
|
/>
|
||||||
|
<veui-table-column
|
||||||
|
field="bid"
|
||||||
|
title="Bid"
|
||||||
|
width="160"
|
||||||
|
align="right"
|
||||||
|
:filter-value="filtered"
|
||||||
|
>
|
||||||
|
<template #default="{ bid }">
|
||||||
|
{{ bid | currency }}
|
||||||
|
</template>
|
||||||
|
<template #filter="{ close }">
|
||||||
|
<veui-checkbox v-model="filtered">
|
||||||
|
>800
|
||||||
|
</veui-checkbox>
|
||||||
|
</template>
|
||||||
|
</veui-table-column>
|
||||||
|
<veui-table-column
|
||||||
|
field="updateDate"
|
||||||
|
title="Last updated"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template #default="{ updateDate }">
|
||||||
|
{{ updateDate | date }}
|
||||||
|
</template>
|
||||||
|
</veui-table-column>
|
||||||
|
<veui-table-column
|
||||||
|
field="operation"
|
||||||
|
title="Operations"
|
||||||
|
>
|
||||||
|
<template #default="{ index }">
|
||||||
|
<veui-button
|
||||||
|
ui="text"
|
||||||
|
@click="remove(index)"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</veui-button>
|
||||||
|
</template>
|
||||||
|
</veui-table-column>
|
||||||
|
</veui-table>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Table, Column, Checkbox, Button } from 'veui'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'veui-table': Table,
|
||||||
|
'veui-table-column': Column,
|
||||||
|
'veui-checkbox': Checkbox,
|
||||||
|
'veui-button': Button
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
currency (value) {
|
||||||
|
return '¥' + value.toFixed(2)
|
||||||
|
},
|
||||||
|
date (value) {
|
||||||
|
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||||
|
return parts.join('-')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: '3154',
|
||||||
|
name: 'Steve Rogers',
|
||||||
|
bid: 1024,
|
||||||
|
updateDate: '20131117'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3155',
|
||||||
|
name: 'Thor Odinson',
|
||||||
|
bid: 598,
|
||||||
|
updateDate: '20140214'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3156',
|
||||||
|
name: 'Tony Stark',
|
||||||
|
bid: 820,
|
||||||
|
updateDate: '20170610'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3157',
|
||||||
|
name: 'Stephen Strange',
|
||||||
|
bid: 736,
|
||||||
|
updateDate: '20180109'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
crowded: false,
|
||||||
|
filtered: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredData () {
|
||||||
|
if (!this.filtered) {
|
||||||
|
return this.data
|
||||||
|
}
|
||||||
|
return this.data.filter(({ bid }) => bid > 800)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
remove (index) {
|
||||||
|
this.data.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.veui-checkbox {
|
||||||
|
margin: 8px 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" scoped docs>
|
||||||
|
section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<docs>
|
||||||
|
可以使用 `crowded` 这个 `ui` 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。
|
||||||
|
</docs>
|
||||||
|
|
||||||
|
<docs locale="en-US">
|
||||||
|
You can use the `ui` prop value `crowded` to hide filter button by default when there are too many columns to be displayed.
|
||||||
|
</docs>
|
||||||
@ -18,6 +18,12 @@ Supports specifying row keys, mode of selection, and sorting by values of specif
|
|||||||
|
|
||||||
[[ demo src="/demo/table/advanced.vue" ]]
|
[[ demo src="/demo/table/advanced.vue" ]]
|
||||||
|
|
||||||
|
### Filter
|
||||||
|
|
||||||
|
Use the `filter` slot to enable custom column filter dropdown.
|
||||||
|
|
||||||
|
[[ demo src="/demo/table/filter.vue" ]]
|
||||||
|
|
||||||
### Scroll inside
|
### Scroll inside
|
||||||
|
|
||||||
Allow table content to be scrollable inside the table body, i.e. the effect of fixed head/foot.
|
Allow table content to be scrollable inside the table body, i.e. the effect of fixed head/foot.
|
||||||
|
|||||||
14
package-lock.json
generated
14
package-lock.json
generated
@ -3436,6 +3436,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"babel-eslint": {
|
||||||
|
"version": "10.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
|
||||||
|
"integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@babel/code-frame": "^7.0.0",
|
||||||
|
"@babel/parser": "^7.7.0",
|
||||||
|
"@babel/traverse": "^7.7.0",
|
||||||
|
"@babel/types": "^7.7.0",
|
||||||
|
"eslint-visitor-keys": "^1.0.0",
|
||||||
|
"resolve": "^1.12.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"babel-loader": {
|
"babel-loader": {
|
||||||
"version": "8.1.0",
|
"version": "8.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
"update:veui": "npm i -D {veui-loader,veui,veui-theme-dls,babel-plugin-veui,veui-theme-dls-icons}@latest"
|
"update:veui": "npm i -D {veui-loader,veui,veui-theme-dls,babel-plugin-veui,veui-theme-dls-icons}@latest"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
"babel-plugin-lodash": "^3.3.4",
|
"babel-plugin-lodash": "^3.3.4",
|
||||||
"babel-plugin-veui": "^2.0.0-beta.24",
|
"babel-plugin-veui": "^2.0.0-beta.24",
|
||||||
"dls-icons-vue": "^0.14.0",
|
"dls-icons-vue": "^0.14.0",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user