tiny-vue
tiny-vue copied to clipboard
🐛 [Bug]: select组件在render-type=‘grid’,rules:[prop:required:true] ,点击下拉选项的radio或selection控件时要点击两下
Version
3.24.0
Vue Version
3.5.17
Link to minimal reproduction
https://opentiny.design/vue-playground?cmpId=select&fileName=nest-grid-remote.vue&apiMode=Composition&mode=pc&theme=os
Step to reproduce
<template>
<div>
<tiny-form model="value4" :rules="{
city: [{required: true, message: '城市不能为空'}]
}">
<tiny-form-item prop='city' label="城市">
<tiny-select
v-model="value4.city"
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></tiny-form-item>
</tiny-form>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { TinySelect, TinyForm, TinyFormItem } from '@opentiny/vue'
const allData = Array.from({ length: 20 }, (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 value4 = ref({
city:[]
})
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>
官方演练场复现代码
What is expected
No response
What is actually happening
No response
What is your project name
内部项目
Any additional comments (optional)
No response