forked from opentiny/tiny-vue
ing
GitHub
parent
9a292394b4
commit
8c2dc357f7
|
|
@ -202,6 +202,13 @@
|
|||
"type": "Boolean",
|
||||
"desc": "Set initialization not to request data",
|
||||
"defaultValue": "true"
|
||||
},
|
||||
{
|
||||
"name": "suggest",
|
||||
"sample": "suggest",
|
||||
"type": "Boolean",
|
||||
"desc": "Configure the suggest to enable the association function, and automatically trigger the association query after entering the input box; This function needs to be used in conjunction with remoteSearch",
|
||||
"defaultValue": ""
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
|||
|
|
@ -202,6 +202,13 @@
|
|||
"type": "Boolean",
|
||||
"desc": "设置初始化不请求数据",
|
||||
"defaultValue": "true"
|
||||
},
|
||||
{
|
||||
"name": "suggest",
|
||||
"sample": "suggest",
|
||||
"type": "Boolean",
|
||||
"desc": "配置suggest 开启联想功能，输入框输入后自动触发联想查询；该功能需要联合 remoteSearch 使用",
|
||||
"defaultValue": ""
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
|||
|
|
@ -262,5 +262,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": "auto-lookup"
|
||||
},
|
||||
{
|
||||
"title": "Associative query",
|
||||
"content": "<p>Configure the <code>suggest</code> to enable the association function, automatically triggering association queries after input in the input box; This function needs to be used in conjunction with <code>remoteSearch</code>.</p>\n",
|
||||
"link": "popeditor/suggest",
|
||||
"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.Configure the suggest to enable the association function, and automatically trigger the association query after entering the input box; This function needs to be used in conjunction with remoteSearch",
|
||||
"demoId": "suggest"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
},
|
||||
{
|
||||
"title": "布局与配置",
|
||||
"content": "<p>通过 <code>condition</code> 项目里属性里的<code>span</code>配置栅格，<code>labelWidth</code> 配置label宽度。 <code>component</code>配置自定义组件，并通过 <code>attrs</code>配置组件属性</p>\n",
|
||||
"content": "<p>通过 <code>conditions</code> 项目里属性里的<code>span</code>配置栅格，<code>labelWidth</code> 配置label宽度。 <code>component</code>配置自定义组件，并通过 <code>attrs</code>配置组件属性</p>\n",
|
||||
"link": "popeditor/condition-layout",
|
||||
"component": " PopEditor 弹出编辑",
|
||||
"findIntroStr": "该组件只能在弹出的面板中选择数据，不能手动输入数据；弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
||||
|
|
@ -262,5 +262,13 @@
|
|||
"component": " PopEditor 弹出编辑",
|
||||
"findIntroStr": "该组件只能在弹出的面板中选择数据，不能手动输入数据；弹出面板中显示为 Tree 组件或者 Grid 组件。",
|
||||
"demoId": "auto-lookup"
|
||||
},
|
||||
{
|
||||
"title": "联想查询",
|
||||
"content": "<p>配置 <code>suggest</code> 开启联想功能，输入框输入后自动触发联想查询；该功能需要联合 <code>remoteSearch</code>使用\n",
|
||||
"link": "popeditor/suggest",
|
||||
"component": " PopEditor 弹出编辑",
|
||||
"findIntroStr": "该组件只能在弹出的面板中选择数据，不能手动输入数据；弹出面板中显示为 Tree 组件或者 Grid 组件。配置suggest 开启联想功能，输入框输入后自动触发联想查询；该功能需要联合 remoteSearch 使用",
|
||||
"demoId": "suggest"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
value值：{{ value }}
|
||||
<tiny-popeditor
|
||||
v-model="value"
|
||||
:show-clear-btn="true"
|
||||
:grid-op="gridOp"
|
||||
text-field="name"
|
||||
value-field="name"
|
||||
:remote-search="remoteSearch"
|
||||
suggest
|
||||
:conditions="conditions"
|
||||
></tiny-popeditor>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Popeditor } from '@opentiny/vue'
|
||||
const dataset = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopeditor: Popeditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
conditions: [
|
||||
{ label: '公司名', field: 'name' },
|
||||
{ label: '城市', field: 'city' }
|
||||
],
|
||||
gridOp: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: 'ID',
|
||||
width: 40
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
field: 'province',
|
||||
title: '省份',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
field: 'city',
|
||||
title: '城市',
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remoteSearch({ page, conditions, query }) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
if (!conditions) {
|
||||
// 联想查询
|
||||
resolve({
|
||||
data: dataset.filter((i) => i.name.indexOf(query) > -1).slice(0, 20)
|
||||
})
|
||||
} else {
|
||||
// 表单查询
|
||||
const data = dataset.filter(
|
||||
(i) => i.name.indexOf(conditions.name) > -1 && i.city.indexOf(conditions.city) > -1
|
||||
)
|
||||
resolve({
|
||||
data: data.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
|
||||
total: data.length
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue