forked from opentiny/tiny-vue
feat: 增加auto-lookup属性demo及api文档 (#269)
This commit is contained in:
parent
33373bc27f
commit
8f9f3868b7
|
@ -195,6 +195,13 @@
|
|||
"type": "String",
|
||||
"desc": "Customized configuration pop-up window class name",
|
||||
"defaultValue": ""
|
||||
},
|
||||
{
|
||||
"name": "auto-lookup",
|
||||
"sample": "auto-lookup",
|
||||
"type": "Boolean",
|
||||
"desc": "Set initialization not to request data",
|
||||
"defaultValue": "true"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
@ -195,6 +195,13 @@
|
|||
"type": "String",
|
||||
"desc": "自定义配置弹窗类名",
|
||||
"defaultValue": ""
|
||||
},
|
||||
{
|
||||
"name": "auto-lookup",
|
||||
"sample": "auto-lookup",
|
||||
"type": "Boolean",
|
||||
"desc": "设置初始化不请求数据",
|
||||
"defaultValue": "true"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
@ -254,5 +254,13 @@
|
|||
"component": "PopEditor pop-up editing",
|
||||
"findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
|
||||
"demoId": "show-history"
|
||||
},
|
||||
{
|
||||
"title": "Remote Data Request",
|
||||
"content": "<p>Configure the <code>auto-lookup</code> to false, set initialization to not request data, or call this $ref.popuptor.handleSearch() Proactively calls the request method</p>\n",
|
||||
"link": "popeditor/auto-lookup",
|
||||
"component": "PopEditor pop-up editing",
|
||||
"findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
|
||||
"demoId": "auto-lookup"
|
||||
}
|
||||
]
|
||||
|
|
|
@ -254,5 +254,13 @@
|
|||
"component": " PopEditor 弹出编辑",
|
||||
"findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
||||
"demoId": "show-history"
|
||||
},
|
||||
{
|
||||
"title": "远程数据请求",
|
||||
"content": "<p>配置 <code>auto-lookup</code> 为false,设置初始化不请求数据,也可以调用 this.$refs.popeditor.handleSearch() 主动调用请求方法</p>\n",
|
||||
"link": "popeditor/auto-lookup",
|
||||
"component": " PopEditor 弹出编辑",
|
||||
"findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
||||
"demoId": "auto-lookup"
|
||||
}
|
||||
]
|
||||
|
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<tiny-popeditor
|
||||
multi
|
||||
:remote-search="remoteSearch"
|
||||
v-model="value"
|
||||
show-pager
|
||||
:grid-op="gridOp"
|
||||
text-field="name"
|
||||
:auto-lookup="false"
|
||||
value-field="id"
|
||||
ref="popeditor"
|
||||
:conditions="conditions"
|
||||
@click="foucus"
|
||||
></tiny-popeditor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popeditor } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopeditor: Popeditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 5,
|
||||
gridOp: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: 'ID',
|
||||
width: 40
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
field: 'city',
|
||||
title: '城市',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
field: 'employees',
|
||||
title: '员工',
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
pagerOp: {
|
||||
pageSizes: [5, 10, 15]
|
||||
}
|
||||
},
|
||||
conditions: [
|
||||
{ label: '公司名', field: 'name' },
|
||||
{ label: '城市', field: 'city' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
foucus(){
|
||||
const pop=this.$refs.popeditor
|
||||
// 主动调用请求方法
|
||||
pop.handleSearch()
|
||||
},
|
||||
remoteSearch({ page }) {
|
||||
const randomAlphabets = () => {
|
||||
return Array.from({ length: 5 })
|
||||
.map(() => String.fromCharCode(65 + Math.floor(26 * Math.random())))
|
||||
.join('')
|
||||
}
|
||||
const { currentPage, pageSize } = page
|
||||
const data = Array.from({ length: page.pageSize }).map((item, i) => {
|
||||
return {
|
||||
id: pageSize * (currentPage - 1) + i + 1,
|
||||
name: randomAlphabets() + 'YX公司',
|
||||
city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
|
||||
employees: Math.ceil(Math.random() * 10000)
|
||||
}
|
||||
})
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ data, total: 200 })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue