Browse Source

带有搜索框的禁用状态输入框,添加清楚按钮功能

master_hella_20240701
yufei0306 8 months ago
parent
commit
ec1edcad9b
  1. 30
      src/components/Form/src/Form.vue

30
src/components/Form/src/Form.vue

@ -21,7 +21,7 @@ import { set } from 'lodash-es'
import { FormProps } from './types' import { FormProps } from './types'
import { Icon } from '@/components/Icon' import { Icon } from '@/components/Icon'
import { FormSchema, FormSetPropsType } from '@/types/form' import { FormSchema, FormSetPropsType } from '@/types/form'
import { Search } from '@element-plus/icons-vue' import { Search,CircleClose } from '@element-plus/icons-vue'
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
@ -245,7 +245,18 @@ export default defineComponent({
return ( return (
<> <>
<ElTooltip placement="top" content={formModel.value[item.field]} > <ElTooltip placement="top" content={formModel.value[item.field]} >
<ElInput class={'myInput'} v-model={formModel.value[item.field]} placeholder={item?.componentProps?.searchListPlaceholder} disabled={true} /> <ElInput class={'myInput'} v-model={formModel.value[item.field]} placeholder={item?.componentProps?.searchListPlaceholder} disabled={true} v-slots={{
suffix: () => (
<ElButton type="text" icon={CircleClose} style="color:var(--el-button-text-color)" onClick={()=>{
if(Array.isArray(formModel.value[item.field])){
formModel.value[item.field] = []
}else{
formModel.value[item.field] = ''
}
}}>
</ElButton>
)
}}/>
</ElTooltip> </ElTooltip>
<ElButton icon={Search} onClick={()=>{ <ElButton icon={Search} onClick={()=>{
opensearchTable( opensearchTable(
@ -263,7 +274,20 @@ export default defineComponent({
formItemSlotsSearchList[item.field] = () => { formItemSlotsSearchList[item.field] = () => {
return ( return (
<> <>
<ElInput class={'myInput'} v-model={formModel.value[item.field]} placeholder={item?.componentProps?.searchListPlaceholder} disabled={true} /> <ElInput class={'myInput'} v-model={formModel.value[item.field]} placeholder={item?.componentProps?.searchListPlaceholder} disabled={true} v-slots={{
suffix: () => (
<ElButton type="text" icon={CircleClose} style="color:var(--el-button-text-color)" onClick={()=>{
if(Array.isArray(formModel.value[item.field])){
formModel.value[item.field] = []
}else{
formModel.value[item.field] = ''
}
}}>
</ElButton>
)
}}>
</ElInput>
<ElButton icon={Search} onClick={()=>{ <ElButton icon={Search} onClick={()=>{
opensearchTable( opensearchTable(
item.field, item?.componentProps?.searchField, item.field, item?.componentProps?.searchField,

Loading…
Cancel
Save