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