20251204，vue列表实现自定义筛选和列

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>