naive-ui/demo/documentation/components/advanceTableDemos/tableProps.vue
2019-09-23 19:14:15 +08:00

184 lines
3.8 KiB
Vue

<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Table Props 内容过长,表格下方有横向滚动条
</div>
<div
class="n-doc-section__view"
style="display: block;"
>
<!--EXAMPLE_START-->
<n-advance-table
:columns="columns"
:data="data"
/>
<!--EXAMPLE_END-->
</div>
<!-- <n-doc-source-block> -->
<!--SOURCE-->
<!-- </n-doc-source-block> -->
</div>
</template>
<script>
const _columns3 = ($this) => {
return [
{
title: '属性',
key: 'name',
width: 180
},
{
title: '说明',
key: 'desc',
width: 500,
render (h, params) {
return <pre class="n-table-props-desc">
{params.row.desc}
</pre>
}
},
{
title: '类型',
key: 'type',
width: 200
},
{
title: '默认值',
key: 'default',
width: 500,
render (h, params) {
return <pre class="n-table-props-desc">
{params.row.default}
</pre>
}
}
]
}
const data = [
{
name: 'columns',
desc: '表格是否加载中',
type: 'Boolean',
default: `false`
},
{
name: 'loading',
desc: '最大高度,超出后会固定头部,并显示滚动条',
type: 'number | string',
default: `auto`
},
{
name: 'data',
desc: '显示的结构化数据',
type: 'Array',
default: '[]'
},
{
name: 'row-class-name',
desc: `行的css className
当为Function时传入参数是
- {row,_index} 行数据以及在源data数据中的索引
- index行索引`,
type: '[Array, String, Object, Function]',
default: ``
},
{
name: 'search',
desc: `是否显示搜索,如果传入一个Object格式需要如下:
example1: 本地搜索
{
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
columns: [
{ 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)
}
},
placeholder: 'search in local data'
}
--------
example2: 远程搜索
{
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
columns: [
{ label: 'Name',
value: 'name' },
{ label: 'Age',
value: 'age' }
],
onSearch: 'custom', //触发on-change事件进行网络搜索
placeholder: 'search in local data'
}
`,
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)
return {
columns,
data
}
}
}
</script>
<style>
.n-table-props-desc {
white-space:pre-wrap;
}
</style>