<el-select v-model.trim="param.dataType" placeholder="" @change="onType" > <el-option v-for="item in dictionaryTypeList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> 中使用 onType () { this.param.dataValue = '' this.param.dataKey = '' },,再去选择的时候,两个值输入不进去,是为什么,代码怎么修改
时间: 2024-01-16 09:02:10 浏览: 128
可能是因为 `v-model.trim` 会将输入的值去除首尾空格,导致无法输入有效值。可以尝试将 `v-model` 改为 `:value` 和 `@input`,并在 `@input` 事件中手动去除空格:
```
<el-select
:value="param.dataType"
placeholder=""
@input="onType"
>
<el-option
v-for="item in dictionaryTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
...
onType(val) {
this.param.dataType = val.trim();
this.param.dataValue = '';
this.param.dataKey = '';
},
```
这样应该就可以正常输入有效值了。
相关问题
<el-select v-model.trim="param.dataType" placeholder="" @change="onType" > <el-option v-for="item in dictionaryTypeList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <span class="c-grid-form__label u-required">参数</span> <el-input v-model.trim="param.dataValue" placeholder="请输入参数" />选择选择领一个值的时候,下方的输入框已经存在的值清除,可以输入新的值
您可以在`onType`方法里添加相应的逻辑,当用户选择了一个新的选项时,将`param.dataValue`的值清空。例如:
```
onType() {
this.param.dataValue = ''; // 清空输入框的值
}
```
这样当用户选择了一个新的选项时,就会清空输入框的值,让用户可以输入新的值。
<el-form-item label="联系人" prop="contactsList"> <el-button type="primary" link :disabled="dialogType === 'check'" @click="handleContactsInfo">添加</el-button> <el-table :data="infoForm.contactsList" border stripe size="small"> <el-table-column label="姓名" prop="ContactsName"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsName" maxlength="20" placeholder="请填写姓名" show-word-limit ></el-input> </template> </el-table-column> <el-table-column label="部门" prop="ContactsDepartment"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsDepartment" maxlength="20" show-word-limit placeholder="请填写部门" ></el-input> </template> </el-table-column> <el-table-column label="职务" prop="ContactsDuty"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsDuty" maxlength="20" show-word-limit placeholder="请填写职务" ></el-input> </template> </el-table-column> <el-table-column label="联系方式" prop="ContactNumber"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactNumber" maxlength="50" show-word-limit placeholder="请填写联系方式" ></el-input> </template> </el-table-column> <el-table-column label="操作" width="56px"> <template #default="{ $index }"> <el-button type="primary" link size="small" :disabled="dialogType === 'check'" @click="handleRemove($index)" > 删除 </el-button> </template> </el-table-column> </el-table> </el-form-item> 该表单初始就有一个,且至少保留一个,对表单内姓名一栏进行必填校验
你可以通过在 el-input 元素的前面添加一个 el-form-item 元素,并设置 prop 属性为 "ContactsName",然后在 el-input 元素中添加一个 :rules 属性来进行必填校验。以下是示例代码:
```html
<el-table-column label="姓名" prop="ContactsName">
<template #default="{ row }">
<el-form-item prop="ContactsName" :rules="[{ required: true, message: '请填写姓名' }]">
<el-input
:disabled="dialogType === 'check'"
v-model.trim="row.ContactsName"
maxlength="20"
placeholder="请填写姓名"
show-word-limit
></el-input>
</el-form-item>
</template>
</el-table-column>
```
这样,当用户没有填写姓名时,表单会显示错误提示信息。
阅读全文