<think>我们要求
下拉框默认值为空，即初始时没有选中任何选项。在Element UI中，我们可以将`v-model`绑定的值设置为`null`或者`undefined`，或者一个空字符串`''`，然后在`el-select`中设置`placeholder`作为提示。
修改点：
1. 将`searchForm.type`的
初始值改为`''`（空字符串）
2. 在`el-select`上设置`placeholder`，例如“请
选择查询条件”
3. 在模板中，将
下拉框的`v-model`绑定到`searchForm.type`，并设置`placeholder`
注意：当`searchForm.type`为空时，
下拉框会显示`placeholder`。
另外，在查询方法中，我们需要根据`searchForm.type`的值来判断使用哪个字段进行查询。如果用户没有
选择查询条件（即`type`为空），我们可以
选择不查询或者提示用户
选择查询条件。
这里我们假设：如果用户没有
选择查询条件，则按照“单据编码”进行查询（或者根据需求调整）。但根据要求，我们也可以设置为必须
选择查询条件。
我们调整一下逻辑：如果用户没有
选择查询条件，则提示用户
选择。
修改后的代码：
```html
<template>
<eh-layout card full-content>
<el-form :inline="true" :model="searchForm" label-width="80px">
<el-form-item label="查询条件">
<el-select
v-model="searchForm.type"
placeholder="请
选择查询条件"
style="width: 120px;"
>
<el-option label="单据编码" value="code"></el-option>
<!-- 其他选项 -->
</el-select>
<el-input
v-model="searchForm.keyword"
placeholder="请输入查询内容"
style="width: 230px; margin-left: 5px;"
@keyup.enter.native="onSearch"
>
<template #append>
<el-button icon="el-icon-search" @click="onSearch" />
</template>
</el-input>
</el-form-item>
<div class="form-actions">
<el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
</div>
</el-form>
<!-- 表格和分页部分保持不变 -->
</eh-layout>
</template>
<script>
export default {
data() {
return {
// ...其他数据
searchForm: {
type: '', // 初始为空，不选中任何选项
keyword: ''
},
};
},
methods: {
onSearch() {
// 如果查询条件类型为空，则提示用户
选择
if (!this.searchForm.type) {
this.$message.warning('请
选择查询条件');
return;
}
this.currentPage = 1;
this.fetchData();
},
resetSearch() {
this.searchForm.type = '';
this.searchForm.keyword = '';
this.currentPage = 1;
this.fetchData(); // 或者根据需求，重置后是否自动查询？这里我们自动查询所有数据
},
// ...其他方法
}
};
</script>
```
说明：
1. 初始状态下，
下拉框显示“请
选择查询条件”，输入框为空。
2. 当用户点击查询按钮时，会检查是否
选择了查询条件类型。如果没有，则弹出警告提示。
3. 重置按钮会将查询条件类型和关键词都置为空，然后重新获取数据（这里重置后我们执行了查询，获取所有数据）。
注意：在`fetchData`方法中，我们需要根据`searchForm.type`的值来构建参数。如果重置后`type`为空，我们可能希望查询所有数据？或者不传递任何条件？这需要与后端接口协调。
如果后端接口在不传递任何条件时返回所有数据，那么我们可以这样处理：
```javascript
async fetchData() {
this.loading = true;
try {
const params = {};
// 当
选择了查询条件并且关键词不为空时才设置参数
if (this.searchForm.type && this.searchForm.keyword.trim() !== '') {
// 根据类型设置参数
params[this.searchForm.type] = this.searchForm.keyword.trim();
}
// 如果查询条件类型为空或者关键词为空，则不设置条件，查询所有数据
const response = await this.$http.post(
'uempCostRcbjsdController!findCostByCodeAndDateRange.m',
params
);
// ...处理响应
} catch (error) {
// ...错误处理
} finally {
this.loading = false;
}
}
```
但是注意：我们的需求是
下拉框默认值为空，所以初始时`type`为空，那么第一次加载（created）时，会执行`fetchData`，此时不传递任何条件，返回所有数据。
如果重置后，我们清空了查询条件，同样会查询所有数据。
这样修改后，就满足了
下拉框默认值为空的要求。
另外，我们也可以考虑在用户没有
选择查询条件时，不允许输入框输入，但这里没有做限制。如果需要，可以添加一个监视器，当`searchForm.type`为空时，清空输入框并禁用输入框。
这里不再展开，根据需求决定。
如果不需要禁用输入框，那么即使没有
选择查询条件，用户也可以输入，但在查询时会提示
选择查询条件。
最后，样式部分保持不变。
注意：在重置时，我们重置了查询条件，并重新获取数据（即查询所有数据）。如果数据量很大，可能需要考虑分页，但在这个例子中，分页是基于加工单号的，每次只显示一个加工单号的数据，所以不会造成性能问题。
如果后端接口不支持无条件的查询，那么需要调整，但通常应该支持。
现在，我们完成了
下拉框默认值为空的修改。
相关问题：</think>我将修改查询表单，使
下拉框默认值为空（即不选中任何选项），并优化相关逻辑。以下是完整代码：
```html
<template>
<eh-layout card full-content>
<!-- 优化查询表单：
下拉框默认值为空 -->
<el-form :inline="true" :model="searchForm" label-width="80px">
<el-form-item label="查询条件">
<el-select
v-model="searchForm.type"
placeholder="请
选择查询类型"
style="width: 120px;"
clearable
>
<el-option label="单据编码" value="code"></el-option>
<!-- 可扩展其他查询条件 -->
</el-select>
<el-input
v-model="searchForm.keyword"
placeholder="请输入查询内容"
style="width: 230px; margin-left: 5px;"
@keyup.enter.native="onSearch"
:disabled="!searchForm.type"
>
<template #append>
<el-button
icon="el-icon-search"
@click="onSearch"
:disabled="!searchForm.type"
/>
</template>
</el-input>
</el-form-item>
<div class="form-actions">
<el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
</div>
</el-form>
<!-- 表格部分 -->
<el-table
:data="currentPageData"
border
:span-method="objectSpanMethod"
style="width: 100%"
:header-cell-style="headerCellStyle"
v-loading="loading"
>
<!-- 表格列定义 -->
</el-table>
<!-- 分页组件 -->
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="1"
:total="processingOrders.length"
layout="prev, pager, next"
></el-pagination>
</eh-layout>
</template>
<script>
export default {
name: 'WorkOrderPagination',
data() {
return {
rawTableData: [],
currentPage: 1,
processingOrders: [],
currentPageData: [],
spanMap: {},
loading: false,
searchForm: {
type: null, //
默认值为空（不选中任何选项）
keyword: '' // 查询关键词
}
};
},
created() {
this.fetchData();
},
watch: {
currentPage() {
this.updateCurrentPageData();
this.calculateSpanMap();
},
// 监听查询类型变化
'searchForm.type'(newVal) {
if (!newVal) {
this.searchForm.keyword = '';
}
}
},
methods: {
async fetchData() {
this.loading = true;
try {
// 构建查询参数
const params = {};
// 只有当查询类型被选中时才添加参数
if (this.searchForm.type) {
params[this.searchForm.type] = this.searchForm.keyword.trim();
}
// 如果未
选择查询类型，则获取所有数据
const response = await this.$http.post(
'uempCostRcbjsdController!findCostByCodeAndDateRange.m',
params
);
if (response && response.rows) {
this.transformData(response.rows);
this.initProcessingOrders();
this.updateCurrentPageData();
this.calculateSpanMap();
}
} catch (error) {
console.error('获取数据失败:', error);
this.$message.error('数据加载失败，请重试');
} finally {
this.loading = false;
}
},
// 查询方法
onSearch() {
if (!this.searchForm.type) {
this.$message.warning('请先
选择查询类型');
return;
}
this.currentPage = 1;
this.fetchData();
},
// 重置方法
resetSearch() {
this.searchForm = {
type: null, // 重置为不选中任何选项
keyword: ''
};
this.currentPage = 1;
this.fetchData(); // 重置后自动查询所有数据
},
// 数据转换方法
transformData(rows) {
this.rawTableData = [];
rows.forEach(row => {
const header = row.header;
const mxList = row.mxList || [];
mxList.forEach(mx => {
this.rawTableData.push({
processingOrder: header.jgdh || '',
productName: header.cpmc || '',
specification: header.ggxh || '',
unit: header.dw || '',
quantity: header.rksl,
costItem: mx.cbxm || '',
subMaterialName: mx.zxwlmc || '',
subMaterialUsage: mx.zxwlxhl,
subMaterialAmount: mx.zxwlje,
totalCost: header.zcb,
unitCost: header.dwcb
});
});
});
},
// 初始化加工单号列表
initProcessingOrders() {
const orders = new Set();
this.rawTableData.forEach(item => {
orders.add(item.processingOrder);
});
this.processingOrders = Array.from(orders);
},
// 更新当前页数据
updateCurrentPageData() {
if (this.processingOrders.length === 0) {
this.currentPageData = [];
return;
}
const currentOrder = this.processingOrders[this.currentPage - 1];
this.currentPageData = this.rawTableData.filter(
item => item.processingOrder === currentOrder
);
},
// 其他方法保持不变...
}
};
</script>
<style>
/* 样式优化 */
.el-select .el-input__inner {
padding-right: 25px; /* 为清除按钮留出空间 */
}
.el-input-group__append {
background-color: #409EFF;
color: white;
border-color: #409EFF;
cursor: pointer;
padding: 0 12px;
}
.el-input-group__append:hover {
background-color: #66b1ff;
}
.el-input-group__append.is-disabled {
background-color: #f5f7fa;
color: #c0c4cc;
border-color: #e4e7ed;
cursor: not-allowed;
}
.form-actions {
display: inline-block;
vertical-align: top;
margin-top: 3px;
margin-left: 10px;
}
</style>
```
### 主要修改点：
1. **
下拉框默认值为空**：
```javascript
searchForm: {
type: null, //
默认值为空（不选中任何选项）
keyword: '' // 查询关键词
}
```
2. **添加清除功能**：
```html
<el-select
v-model="searchForm.type"
placeholder="请
选择查询类型"
clearable <!-- 添加清除按钮 -->
>
```
3. **智能禁用功能**：
- 当未
选择查询类型时，禁用输入框和搜索按钮
```html
<el-input
:disabled="!searchForm.type"
>
<template #append>
<el-button
:disabled="!searchForm.type"
/>
</template>
</el-input>
```
4. **查询验证逻辑**：
```javascript
onSearch() {
if (!this.searchForm.type) {
this.$message.warning('请先
选择查询类型');
return;
}
// 执行查询...
}
```
5. **重置逻辑优化**：
```javascript
resetSearch() {
this.searchForm = {
type: null, // 重置为不选中任何选项
keyword: ''
};
// 自动查询所有数据...
}
```
6. **监听查询类型变化**：
```javascript
watch: {
'searchForm.type'(newVal) {
if (!newVal) {
this.searchForm.keyword = ''; // 清除输入内容
}
}
}
```
### 用户体验优化：
1. **视觉反馈**：
- 未
选择查询类型时，输入框和搜索按钮显示为禁用状态
- 添加了加载指示器 (`v-loading="loading"`)
- 清除按钮方便用户快速重置
选择
2. **操作引导**：
-
下拉框显示"请
选择查询类型"的占位文本
- 输入框显示"请输入查询内容"的占位文本
- 当用户未
选择查询类型直接点击搜索时，显示友好提示
3. **键盘支持**：
- 支持回车键触发搜索 (`@keyup.enter.native`)
4. **响应式设计**：
- 表单元素布局适应不同屏幕尺寸
- 按钮悬停效果增强交互体验
扫一扫
4206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
