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",
|
"type": "String",
|
||||||
"desc": "Customized configuration pop-up window class name",
|
"desc": "Customized configuration pop-up window class name",
|
||||||
"defaultValue": ""
|
"defaultValue": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "auto-lookup",
|
||||||
|
"sample": "auto-lookup",
|
||||||
|
"type": "Boolean",
|
||||||
|
"desc": "Set initialization not to request data",
|
||||||
|
"defaultValue": "true"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"slots": [
|
"slots": [
|
||||||
|
|
|
@ -195,6 +195,13 @@
|
||||||
"type": "String",
|
"type": "String",
|
||||||
"desc": "自定义配置弹窗类名",
|
"desc": "自定义配置弹窗类名",
|
||||||
"defaultValue": ""
|
"defaultValue": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "auto-lookup",
|
||||||
|
"sample": "auto-lookup",
|
||||||
|
"type": "Boolean",
|
||||||
|
"desc": "设置初始化不请求数据",
|
||||||
|
"defaultValue": "true"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"slots": [
|
"slots": [
|
||||||
|
|
|
@ -254,5 +254,13 @@
|
||||||
"component": "PopEditor pop-up editing",
|
"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.",
|
"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"
|
"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 弹出编辑",
|
"component": " PopEditor 弹出编辑",
|
||||||
"findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
"findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
||||||
"demoId": "show-history"
|
"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