el-checkbox el-popover

### 实现方案 要在 `el-table` 中通过 `el-popover` 组件实现自定义表头筛选功能，可以按照以下方式设计： #### 1. 使用 `slot="header"` 插槽 在 `el-table-column` 的头部区域插入一个 `el-popover` 组件作为触发器。当用户点击该按钮时，弹出框会显示筛选条件的内容。 ```vue <el-table :data="tableData"> <el-table-column label="名称" prop="name"> <!-- 自定义表头 --> <template slot="header" slot-scope="scope"> <span>名称</span> <el-button type="text" icon="el-icon-filter" @click.stop="togglePopover(scope)"> 筛选 </el-button> <el-popover v-model="popoverVisible" placement="bottom" title="筛选条件" width="200" trigger="manual" > <el-checkbox-group v-model="selectedFilters"> <el-checkbox v-for="(item, index) in filterOptions" :key="index" :label="item">{{ item }}</el-checkbox> </el-checkbox-group> <div style="text-align: right; margin-top: 8px;"> <el-button size="mini" @click="clearFilters">清空</el-button> <el-button type="primary" size="mini" @click="applyFilters">应用</el-button> </div> </el-popover> </template> <template slot-scope="scope"> {{ scope.row.name }} </template> </el-table-column> </el-table> ``` #### 2. 数据绑定与逻辑处理 为了支持动态过滤操作，需要维护以下几个变量： - `popoverVisible`: 控制 `el-popover` 是否可见。 - `filterOptions`: 定义可选项列表。 - `selectedFilters`: 存储当前已选择的筛选项。 以下是 Vue.js 部分的数据和方法声明： ```javascript export default { data() { return { tableData: [ { name: '张三', age: 25 }, { name: '李四', age: 30 }, { name: '王五', age: 27 } ], popoverVisible: false, filterOptions: ['张三', '李四', '王五'], // 可选项 selectedFilters: [] // 当前选中的筛选项 }; }, methods: { togglePopover() { this.popoverVisible = !this.popoverVisible; }, clearFilters() { this.selectedFilters = []; this.applyFilters(); }, applyFilters() { const filteredData = this.tableData.filter(row => { return ( this.selectedFilters.length === 0 || this.selectedFilters.includes(row.name) ); }); console.log('Filtered Data:', filteredData); this.popoverVisible = false; // 关闭弹窗 } } }; ``` 以上代码实现了基于 `el-popover` 和 `el-checkbox-group` 的筛选功能[^1]。具体来说，`el-popover` 提供了一个浮层用于展示筛选条件；而 `el-checkbox-group` 则允许用户多选特定条目来完成数据过滤。 #### 3. 动态更新表格视图 如果希望实时反映筛选后的结果，则可以通过计算属性重新渲染表格内容。例如，在 Vue.js 中添加如下计算属性： ```javascript computed: { filteredTableData() { return this.tableData.filter(row => { return ( this.selectedFilters.length === 0 || this.selectedFilters.includes(row.name) ); }); } } ``` 随后将 `<el-table>` 的 `:data` 属性替换为 `filteredTableData` 即可自动同步筛选状态变化[^2]。 --- ### 注意事项 - 如果存在多个列都需要独立的筛选功能，建议分别为每列创建单独的状态管理对象（如数组索引映射），以便区分不同列之间的交互行为。 - 对于复杂场景下的性能优化考虑，应避免频繁调用深拷贝或其他高耗能运算过程。 ---

### el-popover 组件的功能与使用方法 #### 功能概述 `el-popover` 是 Element UI 提供的一个弹出框组件，主要用于展示额外的信息或操作选项。当鼠标悬停、点击或其他触发方式激活时，会显示指定的内容。该组件支持多种配置项来满足不同的交互需求。 #### 基本属性设置 - `placement`: 定义弹窗位置，可选值有 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end，默认 bottom。 - `width`: 设置宽度，默认自动适应内容大小。 - `trigger`: 控制如何打开 popover, 支持 click/focus/hover/manual 四种模式[^1]。 #### 实现示例：查看示例图片功能 为了创建一个简单的查看大图的效果，在 HTML 中定义如下结构： ```html <template> <!-- 图片缩略图 --> <img src="small_image_url" alt="" @mouseover="showBigImage"> <!-- 大图预览 --> <el-popover ref="bigImageViewer" placement="right" title="" width="200" trigger="manual" :visible.sync="isShowBigImg"> <img :src="largeImageUrl" style="max-width: 100%;"> </el-popover> </template> <script> export default { data() { return { isShowBigImg: false, largeImageUrl: 'large_image_url' }; }, methods: { showBigImage(event){ this.$refs.bigImageViewer.show(); this.isShowBigImg = true; document.body.addEventListener('mouseleave', ()=>{ this.hideBigImage(); }, {once:true}); }, hideBigImage(){ this.$refs.bigImageViewer.hide(); this.isShowBigImg = false; } } } </script> ``` 此代码片段展示了如何利用 `el-popover` 来实现鼠标移到小图上即刻显示出对应的大尺寸版本图像，并通过监听 mouseleave 事件隐藏大图预览[^2]。 #### 自定义内容案例 对于更复杂的场景比如动态加载数据列表作为 popover 的主体部分，则可以通过 Vue.js 数据绑定机制轻松完成: ```html <!-- 表格列选择器 --> <el-popover placement="bottom-end" width="400" trigger="click" :visible-arrow="false" popper-class="table_pop"> <i class="el-icon-s-tools" slot="reference"></i> <div class="text">选择列</div> <el-checkbox-group v-model="selectedColumns" @change="onColumnChange"> <el-checkbox v-for="(column,index) in allColumns" :key="index" :label="column">{{ column }}</el-checkbox> </el-checkbox-group> </el-popover> ``` 上述例子中，通过 `v-for` 循环遍历所有可用的表头名称并将其呈现给用户进行多选；当选中的项目发生变化时调用相应的处理函数更新视图状态[^3]。