Skip to content

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

@rongxingsun

Description

@rongxingsun

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions