mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
1126 lines
26 KiB
Vue
1126 lines
26 KiB
Vue
<template>
|
|
<div
|
|
ref="doc"
|
|
class="n-doc"
|
|
>
|
|
<div class="n-doc-header">
|
|
<n-gradient-text :font-size="20">
|
|
AdvanceTable
|
|
</n-gradient-text>
|
|
</div>
|
|
<div class="n-doc-body">
|
|
<!-- remote sort -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Basic use
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns0"
|
|
:data="data"
|
|
:row-cls="rowCls"
|
|
>
|
|
<template #table-operation>
|
|
<n-button>custom operation by v-slot:table-operation</n-button>
|
|
</template>
|
|
</n-advance-table>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns0"
|
|
:data="data"
|
|
:rowCls="rowCls"
|
|
>
|
|
<template #table-operation>
|
|
<n-button>custom operation by v-slot:table-operation</n-button>
|
|
</template>
|
|
</n-advance-table>
|
|
//
|
|
<script>
|
|
export default {
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
return {
|
|
rowCls:{'rowGreen': true, 'rowColor': false}, // ['rowGreen', 'rowColor'], 'rowGreen rowColor'
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
width: 300 //custom column width
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.rowGreen:hover {
|
|
background-color:rgb(37, 109, 85)!important
|
|
}
|
|
</style>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Fixed header
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px" // maxheight will fix header
|
|
:on-change="onChange"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
mixins: [docCodeEditorMixin],
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom',
|
|
ellipsis:true,// 溢出隐藏，显示省略号
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
align: 'center',//居中
|
|
sortable: true,
|
|
order: 1, // 默认升序
|
|
sorter: (a, b) => {
|
|
// soter 方法替换默认的sorter函数
|
|
return a.age - b.age
|
|
},
|
|
filterMultiple: true, //多选 onFilter接受参数为数组
|
|
filterItems: [{
|
|
label: '14',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.age)
|
|
// switch (value) {
|
|
// case 14:
|
|
// return record.age <= value
|
|
// case 15:
|
|
// return record.age >= value
|
|
// }
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange (...args) {
|
|
console.log(args)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<!-- remote sort -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Remote sort
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns1"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom'
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: 'custom', // 远程sort 传入props 需要包含on-change事件
|
|
filterMultiple: false, //多选 onFilter接受参数为数组
|
|
filterItems: [{
|
|
label: 'smaller than 14',
|
|
value: 14
|
|
}, {
|
|
label: 'greater than 15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
switch (value) {
|
|
case 14:
|
|
return record.age <= value
|
|
case 15:
|
|
return record.age >= value
|
|
}
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange (...args) {
|
|
console.log(args)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 远程 filter -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Remote filter
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns1"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom' //远程filter 传入props 需要包含on-change事件
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: 'custom', // 远程sort 传入props 需要包含on-change事件
|
|
filterMultiple: false, //多选 onFilter接受参数为数组
|
|
filterItems: [{
|
|
label: 'smaller than 14',
|
|
value: 14
|
|
}, {
|
|
label: 'greater than 15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
switch (value) {
|
|
case 14:
|
|
return record.age <= value
|
|
case 15:
|
|
return record.age >= value
|
|
}
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange (...args) {
|
|
console.log(args)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Pagination in local
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:pagination="{ total: data.length, limit: 10 }"
|
|
:loading="loading"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:pagination="{total:data.length,limit:10}"
|
|
:loading="loading"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
mixins: [docCodeEditorMixin],
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
loading:true,
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom'
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: true,
|
|
filterMultiple: true, //多选 onFilter接受参数为数组
|
|
filterItems: [{
|
|
label: '14',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.age)
|
|
// switch (value) {
|
|
// case 14:
|
|
// return record.age <= value
|
|
// case 15:
|
|
// return record.age >= value
|
|
// }
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange (...args) {
|
|
console.log(args)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
<!-- 远程分页 -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Pagination remote
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:pagination="{ total: data.length, limit: 10, custom: true }"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:pagination="{total:data.length,limit:10,custom:true}"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
mixins: [docCodeEditorMixin],
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai' + idx,
|
|
age: 10 + Math.ceil(Math.random() * 10)
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
columns: []
|
|
data: d
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange (...args) {
|
|
console.log(args)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索 -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Search in local
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:search="search"
|
|
:pagination="{ total: data.length, limit: 10 }"
|
|
>
|
|
<div slot="table-operation">
|
|
custom
|
|
</div>
|
|
<div slot="table-operation-search-right">
|
|
right custom
|
|
</div>
|
|
</n-advance-table>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:search="search"
|
|
:pagination="{total:data.length,limit:10,custom:true}"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
data () {
|
|
...
|
|
return {
|
|
columns: []
|
|
data: d,
|
|
search: {
|
|
columns: [
|
|
{ label: 'Name',
|
|
value: 'name' }
|
|
],
|
|
onSearch: (key,word,row)=>{
|
|
return row[key].includes(word)
|
|
}
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange ({ filter, sorter, pagination, search }) {
|
|
alert('remote handler: \n' + JSON.stringify({ sorter, filter, pagination, search }, null, '\t'))
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索 remote -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Search remote
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:search="search1"
|
|
:pagination="{ total: data.length, limit: 10 }"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange"
|
|
:search="search"
|
|
:pagination="{total:data.length,limit:10,custom:true}"
|
|
/>
|
|
//
|
|
<script>
|
|
export default {
|
|
data () {
|
|
...
|
|
return {
|
|
columns: []
|
|
data: d,
|
|
search: {
|
|
columns: [
|
|
{ label: 'Name',
|
|
value: 'name' }
|
|
],
|
|
onSearch: 'custom',
|
|
placeholder: 'search from net'
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
},
|
|
onChange ({ filter, sorter, pagination, search }) {
|
|
alert('remote handler: \n' + JSON.stringify({ sorter, filter, pagination, search }, null, '\t'))
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
<!-- test -->
|
|
<div class="n-doc-section">
|
|
<div class="n-doc-section__header">
|
|
Test
|
|
</div>
|
|
<div class="n-doc-section__view">
|
|
<n-advance-table
|
|
ref="table"
|
|
:columns="columns4"
|
|
:data="data"
|
|
max-height="300px"
|
|
:on-change="onChange1"
|
|
:search="search"
|
|
:pagination="{ total: count, limit: 10 ,custom:true}"
|
|
/>
|
|
</div>
|
|
<div class="n-doc-section__source">
|
|
<textarea>
|
|
<n-advance-table
|
|
:columns="columns"
|
|
:data="data"
|
|
max-height="300px"
|
|
ref="table"
|
|
:on-change="onChange"
|
|
:search="search"
|
|
:pagination="{total:data.length,limit:10,custom:true}"
|
|
/>
|
|
//
|
|
<script>
|
|
// if you want to set sorter filter searcher and pagnation
|
|
|
|
mounted () {
|
|
this.$refs.table.setParams({ filter: { age: [14] }, sorter: { key: 'age', type: -1 }, searcher: { key: 'name', value: 'xiaobai' } })
|
|
},
|
|
methods:{
|
|
onChange ({ filter, sorter, pagination, search }) {
|
|
console.log('执行', { filter, sorter, pagination, search })
|
|
},
|
|
}
|
|
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- body end -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import docCodeEditorMixin from './docCodeEditorMixin'
|
|
const _columns3 = ($this) => {
|
|
return [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: $this.filterItems,
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.name + '')
|
|
}
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: 'custom',
|
|
filterMultiple: true,
|
|
filterItems: [{
|
|
label: '14',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.age)
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
]
|
|
}
|
|
export default {
|
|
mixins: [docCodeEditorMixin],
|
|
data () {
|
|
let d = new Array(20).fill(0)
|
|
d = d.map((item, idx) => {
|
|
return {
|
|
name: 'xiaobai213213132123213111121' + idx,
|
|
age: Math.ceil((Math.random() * 20))
|
|
}
|
|
})
|
|
console.log(d)
|
|
return {
|
|
loading: false,
|
|
rowCls: { 'rowGreen': true, 'rowColor': false }, // ['rowGreen', 'rowColor'], 'rowGreen rowColor'
|
|
count: 0,
|
|
search1: {
|
|
columns: [
|
|
{ label: 'Name',
|
|
value: 'name' },
|
|
{ label: 'Age',
|
|
value: 'age' }
|
|
],
|
|
onSearch: 'custom',
|
|
placeholder: 'search from net'
|
|
},
|
|
search: {
|
|
columns: [
|
|
{ label: 'Name',
|
|
value: 'name' }
|
|
],
|
|
onSearch: 'custom'
|
|
},
|
|
columns: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
ellipsis: true,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom'
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: true,
|
|
order: 1,
|
|
className: (params) => {
|
|
let row = params.row
|
|
if (row.age > 10) {
|
|
return 'older higher'
|
|
}
|
|
return ''
|
|
},
|
|
align: 'center',
|
|
sorter: (a, b) => {
|
|
return a.age - b.age
|
|
},
|
|
filterMultiple: true,
|
|
filterItems: [{
|
|
label: '14',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}, {
|
|
label: '16',
|
|
value: 16
|
|
}, {
|
|
label: '17',
|
|
value: 17
|
|
}, {
|
|
label: '18',
|
|
value: 18
|
|
}, {
|
|
label: '19',
|
|
value: 19
|
|
} ],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.age)
|
|
// switch (value) {
|
|
// case 14:
|
|
// return record.age <= value
|
|
// case 15:
|
|
// return record.age >= value
|
|
// }
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
data: d,
|
|
columns0: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
width: 300
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}],
|
|
columns1: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: 'custom'
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: 'custom',
|
|
filterMultiple: false, // 多选 onFilter接受参数为数组
|
|
filterItems: [{
|
|
label: 'smaller than 14',
|
|
value: 14
|
|
}, {
|
|
label: 'greater than 15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
switch (+value) {
|
|
case 14:
|
|
return record.age <= +value
|
|
case 15:
|
|
return record.age >= +value
|
|
}
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
columns3: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
filterMultiple: false,
|
|
filterItems: [{
|
|
label: 'xiaobai1',
|
|
value: 'xiaobai1'
|
|
}],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.name)
|
|
}
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
sortable: 'custom',
|
|
filterMultiple: true,
|
|
filterItems: [{
|
|
label: '14!',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}],
|
|
onFilter: (value, record) => {
|
|
return value.includes(record.age)
|
|
},
|
|
render: (h, params) => {
|
|
return <b>{params.row.age}</b>
|
|
}
|
|
},
|
|
{
|
|
title: '#',
|
|
render: (h, params) => {
|
|
return (
|
|
<n-button
|
|
style="margin:0;"
|
|
size="small"
|
|
onClick={() => this.handleClick(params)}
|
|
>
|
|
delete
|
|
</n-button>
|
|
)
|
|
}
|
|
}
|
|
],
|
|
filterItems:
|
|
[{
|
|
label: '14',
|
|
value: 14
|
|
}, {
|
|
label: '15',
|
|
value: 15
|
|
}]
|
|
}
|
|
},
|
|
computed: {
|
|
columns4 () {
|
|
return _columns3(this)
|
|
}
|
|
},
|
|
mounted () {
|
|
setTimeout(() => {
|
|
this.count = 80
|
|
this.filterItems = [
|
|
{
|
|
label: 'hahah',
|
|
value: 1
|
|
}
|
|
]
|
|
}, 3000)
|
|
// this.$refs.table.setParams({ page: +this.$route.query.page || 5 })
|
|
|
|
this.$refs.table.setParams({ filter: { age: [14] }, sorter: { key: 'age', type: -1 }, searcher: { key: 'name', value: 'xiaobai' }, page: 2 })
|
|
setTimeout(() => {
|
|
console.log('重新执行')
|
|
this.$refs.table.setParams({ filter: { age: [14, 15] }, page: 1 })
|
|
}, 10000)
|
|
},
|
|
methods: {
|
|
handleClick (params) {
|
|
alert('delete' + JSON.stringify(params))
|
|
this.$set(this.data, params._index, {
|
|
...params.row,
|
|
age: 100
|
|
})
|
|
},
|
|
onChange1 ({ filter, sorter, pagination, search }) {
|
|
console.log('执行', { filter, sorter, pagination, search })
|
|
},
|
|
onChange ({ filter, sorter, pagination, search }) {
|
|
alert('remote handler: \n' + JSON.stringify({ sorter, filter, pagination, search }, null, '\t'))
|
|
console.log({ filter, sorter, pagination, search })
|
|
this.loading = true
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 2000)
|
|
this.data = [{
|
|
name: 'form net',
|
|
age: 0
|
|
}]
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.older{
|
|
background:rgb(255, 204, 146);
|
|
}
|
|
.higher {
|
|
color: blue;
|
|
}
|
|
.rowGreen:hover {
|
|
background-color:rgb(37, 109, 85)!important
|
|
}
|
|
.rowColor{
|
|
color:bisque
|
|
}
|
|
</style>
|