示例代码
allowClear
<a-form-item label="单号">
<a-input
placeholder="请输入单号查询"
v-model.trim="searchParams[0].Value"
allowClear
></a-input>
</a-form-item>
<a-form-item label="核销状态">
<a-select v-model="searchParams[1].Value" allowClear placeholder="请选择核销状态查询">
<a-select-option :value="key" v-for="(item, key) in hxStatusText" :key="key">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<script>
data () {
return {
// 查询参数
searchParams: [
{ key: 'docNo', Operator: 'like', Value: null },
{ key: 'isVerificationFinish', Operator: 'equal', Value: null}
]
},
</script>
官方文档
value状态变化
搜索框一般使用input和select控件，在清空之后input的value变为''，select的value变为undefined，placeholder生效。
清空
请求参数
业务要求
搜索框的值统一设置为null，再后端发请求。
实现
对查询参数增加深度监听，监听到''和undefined之后重置为null
<script>
watch: {
searchParams: {
// allowClear 使用后input值为'' select值为undefined
handler (newV, oldV) {
var tempParams = [...this.searchParams]
for (let index = 0; index < tempParams.length; index++) {
const element = tempParams[index]
if (element.Value === '' || element.Value === undefined) {
this.searchParams[index].Value = null
}
}
},
deep: true
}
}
</script>
再请求
