当前位置: 首页 > news >正文

Vue2_element 表头查询功能

1、效果图(输入框 / 下拉框 / 日期选择器 查询)

2、备注

1、tableData 是表格内容的数组;

2、<template slot="header"></template> 自定义表头的内容;

3、注意:在使用 <template slot="header"></template> 的时候,只会显示表头的自定义内容,表格的内容还需要使用<template slot-scope="scope"> {{ scope.row }} </template> scope.row会显示出该列的所有内容;

3、如果 <template slot='header'></template> 不使用 slot-scope='scope' 会出现不能输入的问题;

4、Vue 2.6+ 版本的插槽语法使用 #header 替换 <template slot='header' slot-scope='scope'></template>

3、举例代码

    <el-table:data="orderList"borderheight="calc(100vh - 200px)"style="width: 100%">// 表头查询-输入框<el-table-columnlabel="项目定义"align="center"prop="projectCode"><template slot="header" slot-scope="scope"><div class="table-header-filter"><span>项目定义</span><el-popoverplacement="bottom"title="请输入"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-inputv-model="queryParams.projectCode"placeholder="请输入项目定义"size="mini"clearable@keyup.enter.native="handleQuery"/><div style="text-align: right; margin-top: 5px"><el-button type="primary" size="mini" @click="handleQuery">搜索</el-button></div></el-popover></div></template><template slot-scope="scope">{{ scope.row.projectCode }}</template></el-table-column>// 表头查询-下拉框<el-table-column label="自制/外购" align="center" prop="bomType"><template slot="header" slot-scope="scope"><div class="table-header-filter"><span>自制/外购</span><el-popoverplacement="bottom"title="请选择"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-selectv-model="queryParams.bomType"size="mini"clearableplaceholder="请选择自制/外购"@keyup.enter.native="handleQuery"><el-optionv-for="(item, index) in bomTypeList":key="index":label="item.label":value="item.value"></el-option></el-select><div style="text-align: right; margin-top: 5px"><el-button type="primary" size="mini" @click="handleQuery">搜索</el-button></div></el-popover></div></template><template slot-scope="scope"><dict-tag :options="bomTypeList" :value="scope.row.bomType" /></template></el-table-column>// 表头查询-日期选择器<el-table-columnlabel="发货时间"align="center"prop="shipmentDate"><template slot="header" slot-scope="scope"><div class="table-header-filter"><span>发货时间</span><el-popoverplacement="bottom"title="请选择"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-date-pickerv-model="queryParams.shipmentDate"type="date"value-format="yyyy-MM-dd"placeholder="请选择发货时间"size="mini"clearable@keyup.enter.native="handleQuery"style="width: 100%"/><div style="text-align: right; margin-top: 5px"><el-button type="primary" size="mini" @click="handleQuery">搜索</el-button></div></el-popover></div></template><template slot-scope="scope">{{ scope.row.shipmentDate }}</template></el-table-column></el-table>
    //查询方法    handleQuery() {this.queryParams.pageNum = 1; //分页初始化this.getList(); //表格数据function},

 

http://www.dtcms.com/a/272093.html

相关文章:

  • Vue+Element Plus 中按回车刷新页面问题排查与解决
  • pytorch 神经网络
  • 深入理解机器学习
  • 【深度学习新浪潮】什么是持续预训练?
  • 深度学习中的常见损失函数详解及PyTorch实现
  • B2、进度汇报(— 25/06/16)
  • Sigma-Aldrich细胞培养基础知识:细胞培养的安全注意事项
  • Vue 中监测路由变化时,通常不需要开启深度监听(deep: true)
  • 基于Python的旅游推荐协同过滤算法系统(去哪儿网数据分析及可视化(Django+echarts))
  • 《Stata面板数据分析:数据检验、回归模型与诊断技术 - 以NLSW工资研究(公开数据)为例》
  • android studio 运行,偶然会导致死机,设置Memory Settings尝试解决
  • 不止于快:金士顿XS2000移动固态硬盘如何重塑你的数字生活
  • 机器学习1
  • ssh: connect to host github.com port 22: connection refused
  • Web学习笔记2
  • 使用球体模型模拟相机成像:地面与天空的可见性判断与纹理映射
  • 「py数据分析」04如何将 Python 爬取的数据保存为 CSV 文件
  • 基于Python的程序员数据分析与可视化系统的设计与实现
  • 三、神经网络——网络优化方法
  • 线上事故处理记录
  • XMAPP MySQL 启动后自动停止
  • 【实战】Dify从0到100进阶--文档解读(1)开源许可和大模型适配
  • Using Spring for Apache Pulsar:Transactions
  • MySQL断开连接后无法正常启动解决记录
  • 第一次搭建数据库
  • JavaScript 树形菜单总结
  • 2025社交电商新风口:推客小程序的商业逻辑与技术实现
  • 数据结构与算法之美:广义表
  • 通过vue如何利用 Three 绘制 简单3D模型(源码案例)
  • Redis中BigKey的隐患