tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard

🐛 [Bug]: select组件在render-type=‘grid’,rules:[prop:required:true] ,点击下拉选项的radio或selection控件时要点击两下

Open rongxingsun opened this issue 5 months ago • 0 comments

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

rongxingsun avatar Jul 15 '25 08:07 rongxingsun