mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
184 lines
3.8 KiB
Vue
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>
|