1、问题描述
在一个复杂列表，巨多筛选、巨多列表字段，大约70个。产品想要实现，自定义筛选和列。试试，用新的前端框架。列表已经实现，如何实现自定义呢？本来这个预估了3天，没想到不到3小时，搞定。服气+丝滑，见人就想说说。
默认页面：
点击按钮
2、如何实现
定义一个弹框，里边字段固定。截图给豆包，直接生成。
1<!-- ========== 弹框组件放在这里 ========== --> 2<el-dialog 3 title="设置筛选和显示列" 4 :visible.sync="settingDialogVisible" 5 width="80%"> 6 <!-- 筛选条件设置部分 --> 7 <el-form :model="userSettingForm" size="small" label-width="100px"> 8 <el-form-item label="筛选条件"> 9 <el-checkbox-group v-model="userSettingForm.filters" class="filter-group"> 10 <el-checkbox label="所购产品" name="filter"></el-checkbox> 11 <el-checkbox label="会员续费情况" name="filter"></el-checkbox> 12 <el-checkbox label="发车通过情况" name="filter"></el-checkbox> 13 <el-checkbox label="活跃情况" name="filter"></el-checkbox> 14 <el-checkbox label="车位数" name="filter"></el-checkbox> 15 <el-checkbox label="经营状况" name="filter"></el-checkbox> 16 17 <el-checkbox label="检测季度等级" name="filter"></el-checkbox> 18 <el-checkbox label="检测渗透率" name="filter"></el-checkbox> 19 <el-checkbox label="最小发车数" name="filter"></el-checkbox> 20 <el-checkbox label="最大发车数" name="filter"></el-checkbox> 21 <el-checkbox label="微店装修情况" name="filter"></el-checkbox> 22 <el-checkbox label="客户编辑使用情况" name="filter"></el-checkbox> 23 24 <el-checkbox label="分享使用情况" name="filter"></el-checkbox> 25 <el-checkbox label="员工通过情况" name="filter"></el-checkbox> 26 <el-checkbox label="员工添加数" name="filter"></el-checkbox> 27 <el-checkbox label="最小员工添加数" name="filter"></el-checkbox> 28 <el-checkbox label="最大员工添加数" name="filter"></el-checkbox> 29 <el-checkbox label="抖音私信回复使用情况" name="filter"></el-checkbox> 30 </el-checkbox-group> 31 </el-form-item> 32 33 <!-- 表格列设置部分 --> 34 <el-form-item label="显示列"> 35 <el-checkbox-group v-model="userSettingForm.columns" class="column-group"> 36 <el-checkbox label="智慧通主体手机号" name="column"></el-checkbox> 37 <el-checkbox label="城市" name="column"></el-checkbox> 38 <el-checkbox label="市场" name="column"></el-checkbox> 39 <el-checkbox label="车位数" name="column"></el-checkbox> 40 <el-checkbox label="检测季度等级" name="column"></el-checkbox> 41 42 <el-checkbox label="检测渗透率" name="column"></el-checkbox> 43 <el-checkbox label="经营状况" name="column"></el-checkbox> 44 <el-checkbox label="月活跃天数" name="column"></el-checkbox> 45 <el-checkbox label="最近拜访" name="column"></el-checkbox> 46 <el-checkbox label="区域运维" name="column"></el-checkbox> 47 48 <el-checkbox label="培训师" name="column"></el-checkbox> 49 <el-checkbox label="直销销售" name="column"></el-checkbox> 50 <el-checkbox label="已购产品" name="column"></el-checkbox> 51 <el-checkbox label="近一月到期产品" name="column"></el-checkbox> 52 <el-checkbox label="首次付款月度" name="column"></el-checkbox> 53 54 <el-checkbox label="发车通过情况" name="column"></el-checkbox> 55 <el-checkbox label="发车数" name="column"></el-checkbox> 56 <el-checkbox label="客户编辑次数" name="column"></el-checkbox> 57 <el-checkbox label="分享人数" name="column"></el-checkbox> 58 <el-checkbox label="添加员工数" name="column"></el-checkbox> 59 60 <el-checkbox label="微店链接" name="column"></el-checkbox> 61 <el-checkbox label="抖音私信回复人数" name="column"></el-checkbox> 62 </el-checkbox-group> 63 </el-form-item> 64 </el-form> 65 66 <span slot="footer" class="dialog-footer"> 67 <el-button @click="settingDialogVisible = false">取 消</el-button> 68 <el-button type="primary" @click="settingDialogSave">确 定</el-button> 69 </span> 70</el-dialog>
关键方法
1 2// 11. 自定义筛选表单 3userSettingForm: { 4 // 存储筛选条件的勾选状态 5 filters: [], 6 // 存储表格列的勾选状态 7 columns: [] 8}, 9// 用于控制实际显示的筛选条件和表格列 10visibleFilters: [], 11visibleColumns: [] 12 13 14mounted() { 15 // 从本地存储加载用户之前的设置 16 const savedSettings = localStorage.getItem('trainerFilterSettings'); 17 if (savedSettings) { 18 this.userSettingForm = JSON.parse(savedSettings); 19 this.visibleFilters = [...this.userSettingForm.filters]; 20 this.visibleColumns = [...this.userSettingForm.columns]; 21 } 22}, 23 24 25/** 26 * 用户设置栏位和筛选 27 */ 28openUserSettingFn(){ 29 this.settingDialogVisible = true; 30}, 31 32settingDialogSave(){ 33 // 将勾选状态同步到实际显示的数组中 34 this.visibleFilters = [...this.userSettingForm.filters]; 35 this.visibleColumns = [...this.userSettingForm.columns]; 36 // 可以在这里添加本地存储，保存用户设置 37 console.log('trainerFilterSettings：', this.userSettingForm); 38 localStorage.setItem('trainerFilterSettings', JSON.stringify(this.userSettingForm)); 39 this.settingDialogVisible = false; 40},
页面部分，筛选和列表
1<el-col :xs="24" :sm="12" :md="8" :lg="4" v-if="visibleFilters.includes('活跃情况')"> 2 <el-form-item prop="activeDaysType"> 3 <el-select 4 v-model="queryParams.activeDaysType" 5 placeholder="请选择活跃情况" 6 clearable 7 > 8 <el-option label="未活跃" value="0"></el-option> 9 <el-option label="1-3天" value="1"></el-option> 10 <el-option label="4-6天" value="2"></el-option> 11 <el-option label="7-14天" value="3"></el-option> 12 <el-option label="15-24天" value="4"></el-option> 13 <el-option label="25天以上" value="5"></el-option> 14 </el-select> 15 </el-form-item> 16</el-col> 17 18 19<el-table-column v-if="visibleColumns.includes('发车通过情况')" prop="vehicleLaunchApprovalStatus" label="发车通过情况" width="120" align="center"> 20</el-table-column> 21<el-table-column v-if="visibleColumns.includes('发车数')" prop="vehicleLaunchCount" label="发车数" width="80" align="center"> 22</el-table-column>
3、AI+VUE，丝滑
看我的问答：
https://www.doubao.com/thread/wbb7fc7c3101236c8
4、思考
这种AI工具，直接生成一个方案，大多数直接可用。惊叹！
VUE这种前端，丝滑，要是传统项目，不可想象。当然，也能做。
很多语法，像最基础的，需要懂吗？认真思考中！！！！
1<el-form :model="queryParams" size="small" :inline="true" v-show="true" label-width="100px"> 2<el-row :gutter="20"> 3 4<!--第1行开始 --> 5<el-col :xs="24" :sm="12" :md="8" :lg="4"> 6 <el-form-item prop="serialNumber"> 7 <el-input 8 v-model="queryParams.serialNumber" 9 placeholder="请输入序列号" 10 clearable 11 @keyup.enter.native="handleQuery" 12 /> 13 </el-form-item> 14</el-col>
《20251204，vue列表实现自定义筛选和列》 是转载文章，点击查看原文。
