住建局特种作业证_锦州网站推广_杭州百度推广代理公司哪家好_网站推广方案模板

let filters = reactive({status:''
});

我想清空filters的内容。给接口传参的时候保证filters是个空对象。

所以使用filters={}。

页面上的确清空了。但是发现赋值一直没办法成功。我明明有下拉。点击某个下拉选项确一直选不中。没办法回填了。

因为reactive定义的变量重新赋值相当于重新创建了一个新的变量，就会失去响应式。

看网上写法还有Object.assign({},filters)。这样的页面上的两个filters的确也清空了。但是如果我在js里面新增了别的filters并没有绑定到dom上。比如我还想有个参数filters.name。那样使用Object.assign({},filters)。实际上是清楚不掉这个name的值的。

还是一个个循环清除对象吧

const clearFilters(filters) {for (const key in filters) {if (filters.hasOwnProperty(key)) {delete filters[key];}}
}

调用clearFilters(filters)

 

<el-form ref="formRef" :inline="true" :model="filters" class="card table-search"><div class="search-title">{{ route.name }}</div><div class="search_content"><div class="searchCol"><el-form-item label="" prop="orgName"><el-autocompletev-model="filters.orgName":trigger-on-focus="false"value-key="orgName":fetch-suggestions="querySearch"clearableclass="inline-input w-50"placeholder="请输入机构"@select="handleSelect"/></el-form-item><el-form-item label="" prop="status"><el-selectv-model="filters.status"placeholder="请选择启用状态"style="width: 240px"clearable><el-option  :value="0" label="启用"></el-option><el-option :value="1" label="停用"></el-option></el-select></el-form-item></div><div class="search_btn"><el-form-item class="operation"><el-button type="primary" @click="search"> 查询</el-button><el-button @click="reset"> 清空</el-button></el-form-item></div></div>
</el-form>

 

let filters = reactive({});
const formRef = ref();

const allOrgs=ref([

{orgName:'机构1',orgCode:'1'},

{orgName:'机构2',orgCode:'2'},

{orgName:'机构3',orgCode:'3'}

])

const querySearch = (queryString: string, cb: any) => {const results = queryString ? allOrgs.value.filter(createFilter(queryString)) : allOrgs.value;cb(results);
};
const createFilter = (queryString: string) => {return (thisOrg) => {return thisOrg.orgName.indexOf(queryString) != -1;};
};
const handleSelect = (item) => {filters.orgCode = item.orgCode;
};

//访问接口
const getTableList = () => {let param= {param:{...filters} };//这里后端希望如果没有搜索条件就传个空对象param:{}这样的格式。regionPage(newParams);
};

const search = () => {if(filters.orgName==""){delete filters.orgName;delete filters.orgCode;}if(filters.status===""){delete filters.status;}getTableList();
};
const reset = () => {
  //Object.assign({},filters) 这里可能导致filters.orgCode没有清除掉// filters={} 这里会导致页面失去响应式。清除内容后再去回填选择不上的问题clearFilters(filters)  //使用这个才正确console.log("filters",filters)formRef.value.resetFields();getTableList();
};

 const clearFilters(filters) {for (const key in filters) {if (filters.hasOwnProperty(key)) {delete filters[key];}}
}