### Vue 中通过 el-form 的时间控件筛选 el-table 数据 在 Vue 项目中，可以通过 `el-form` 组件的时间控件（如 `el-date-picker`），选择特定日期范围后，动态更新 `el-table` 表格中的数据以仅展示符合条件的记录。以下是完整的解决方案： --- #### 1. **HTML 结构** 创建一个包含两个时间控件（开始时间和结束时间）以及一张表格的表单。 ```html <el-form :model="form" ref="form" label-width="80px"> <el-form-item label="开始日期" prop="startTime"> <el-date-picker v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" :picker-options="pickerOptionsStart"> </el-date-picker> </el-form-item> <el-form-item label="结束日期" prop="endTime"> <el-date-picker v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" :picker-options="pickerOptionsEnd"> </el-date-picker> </el-form-item> <el-button type="primary" @click="filterTable">查询</el-button> </el-form> <el-table :data="filteredTableData" border stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="名称" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` --- #### 2. **JavaScript 部分** 定义 `form` 和 `tableData` 数据模型，并实现过滤逻辑。 ```javascript export default { data() { return { form: { startTime: '', // 开始日期 endTime: '' // 结束日期 }, pickerOptionsStart: { disabledDate(time) { const endDateVal = this.form.endTime; if (endDateVal) { return time.getTime() > new Date(endDateVal).getTime(); } }.bind(this) }, pickerOptionsEnd: { disabledDate(time) { const startDateVal = this.form.startTime; if (startDateVal) { return time.getTime() < new Date(startDateVal).getTime(); } }.bind(this) }, tableData: [ { date: '2023-09-01', name: '张三', address: '北京市' }, { date: '2023-09-05', name: '李四', address: '上海市' }, { date: '2023-09-10', name: '王五', address: '广州市' }, { date: '2023-09-15', name: '赵六', address: '深圳市' } ] }; }, computed: { filteredTableData() { if (!this.form.startTime && !this.form.endTime) { return this.tableData; // 如果没有选择任何日期，则返回全部数据 } return this.tableData.filter(item => { const itemDate = new Date(item.date); // 转换为 Date 对象以便比较 const start = this.form.startTime ? new Date(this.form.startTime) : null; const end = this.form.endTime ? new Date(this.form.endTime) : null; if (start && end) { return itemDate >= start && itemDate <= end; // 判断是否在范围内 } else if (start) { return itemDate >= start; // 只有开始日期的情况 } else if (end) { return itemDate <= end; // 只有结束日期的情况 } return false; }); } }, methods: { filterTable() { // 手动触发计算属性重新渲染 this.$forceUpdate(); } } }; ``` --- #### 3. **说明** - 使用 `v-model` 将 `el-date-picker` 的值绑定到 `form.startTime` 和 `form.endTime` 上。 - 定义了 `pickerOptionsStart` 和 `pickerOptionsEnd` 来限制用户的选择范围[^1]。 - 计算属性 `filteredTableData` 动态过滤原始数据 `tableData`，基于选定的日期范围生成新的显示列表。 - 提供了一个按钮调用 `filterTable()` 方法强制刷新视图。 --- #### 4. **效果演示** 当用户选择了某个日期区间后，点击“查询”按钮即可实时更新表格内容，只保留满足条件的记录。 --- ###