128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
||
<div>
|
||
<p>场景1：单选，下拉表格远程搜索基础用法</p>
|
||
<br />
|
||
<tiny-select
|
||
v-model="value1"
|
||
placeholder="请输入关键词"
|
||
render-type="grid"
|
||
filterable
|
||
remote
|
||
:remote-method="remoteMethod"
|
||
:grid-op="gridOpRadio"
|
||
></tiny-select>
|
||
<br /><br />
|
||
|
||
<p>场景2：单选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
|
||
<br />
|
||
<tiny-select
|
||
v-model="value2"
|
||
placeholder="请输入关键词"
|
||
render-type="grid"
|
||
filterable
|
||
remote
|
||
:remote-method="remoteMethod"
|
||
:grid-op="gridOpRadio"
|
||
:remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
|
||
></tiny-select>
|
||
<br /><br />
|
||
|
||
<p>场景3：多选，下拉表格远程搜索基础用法</p>
|
||
<br />
|
||
<tiny-select
|
||
v-model="value3"
|
||
placeholder="请输入关键词"
|
||
multiple
|
||
render-type="grid"
|
||
reserve-keyword
|
||
filterable
|
||
remote
|
||
:remote-method="remoteMethod"
|
||
:grid-op="gridOpMultiple"
|
||
></tiny-select>
|
||
<br /><br />
|
||
|
||
<p>场景4：多选，下拉表格远程搜索 + 自动搜索 + 显示按钮</p>
|
||
<br />
|
||
<tiny-select
|
||
v-model="value4"
|
||
placeholder="请输入关键词"
|
||
multiple
|
||
reserve-keyword
|
||
filterable
|
||
remote
|
||
render-type="grid"
|
||
:remote-method="remoteMethod"
|
||
:grid-op="gridOpMultiple"
|
||
:remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
|
||
></tiny-select>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { Select as TinySelect } from '@opentiny/vue'
|
||
|
||
const allData = Array.from({ length: 1000 }, (a, i) => {
|
||
return {
|
||
value: '00' + i,
|
||
province: '省份' + i,
|
||
city: '城市' + i,
|
||
area: '区域' + i,
|
||
label: `省${i}-市${i}`
|
||
}
|
||
})
|
||
const baseGridOp = {
|
||
data: [],
|
||
height: 300,
|
||
optimization: {
|
||
animat: true,
|
||
delayHover: 250,
|
||
scrollX: { gt: 20 },
|
||
scrollY: { gt: 20 }
|
||
}
|
||
}
|
||
const baseCols = [
|
||
{ field: 'province', title: '省份' },
|
||
{ field: 'city', title: '城市' },
|
||
{ field: 'area', title: '区域' }
|
||
]
|
||
|
||
const value1 = ref('')
|
||
const value2 = ref('')
|
||
const value3 = ref([])
|
||
const value4 = ref([])
|
||
const gridOpRadio = {
|
||
...baseGridOp,
|
||
columns: [{ type: 'radio', title: '' }, ...baseCols]
|
||
}
|
||
const gridOpMultiple = {
|
||
...baseGridOp,
|
||
columns: [{ type: 'selection', title: '' }, ...baseCols]
|
||
}
|
||
|
||
const filter = (value) => {
|
||
return allData.filter((item) => item.city.includes(value))
|
||
}
|
||
|
||
const remoteMethod = (value) => {
|
||
const filterData = filter(value)
|
||
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve(filterData)
|
||
}, 500)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tiny-select {
|
||
width: 280px;
|
||
}
|
||
p {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
</style>
|