Element 中表格表头添加搜索图标和功能使用

问题：我们使用element-ui的表格开发中，会遇到在表头添加搜索的功能。

解决办法：我们可以通过设置 Scoped slot 来自定义表头。

1，headerData是表头的循环数组

2，tableData是表格内容的数组

3，自定义表头的内容

4，注意：在使用的时候，只会显示表头的自定义内容，表格的内容还需要使用 {{ scope.row }} scope.row会显示出该列的所有内容
,5，如果不使用slot-scope='scope’会出现不能输入的问题

6，Vue 2.6+版本的插槽语法使用#header替换Vue的作用域插槽

<template><el-table :data="tableData" style="width: 100%"><template v-for="(headerItem, headerIndex) in headerData"><!-- 下拉框选择器 --><el-table-columnv-if="headerItem.select":label="headerItem.label":prop="headerItem.prop":key="headerIndex"><!-- 表头的 slot --><template #header><el-popover placement="bottom" title="请选择" width="200" trigger="click"><div slot="reference" class="search-header"><span class="search-title">{{ headerItem.label }}</span><i class="search-icon el-icon-search"></i></div><el-select v-model="headerItem.selectValue" placeholder="请选择"><el-optionv-for="item in headerItem.selectOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-popover></template><!-- 表格的 内容 slot --><template slot-scope="scope">{{ scope.row[headerItem.prop] }}</template></el-table-column><!-- 日期选择器 --><el-table-columnv-else-if="headerItem.dateSelect":label="headerItem.label":prop="headerItem.prop":key="headerIndex"><template #header><el-popover placement="bottom" title="请选择" trigger="click"><div class="search-box" slot="reference"><span class="search-title">{{ headerItem.label }}</span><i class="el-icon-arrow-down search-icon"></i></div><el-date-pickertype="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-popover></template><template slot-scope="scope">{{ scope.row[headerItem.prop] }}</template></el-table-column><!-- 输入框 --><el-table-columnv-else-if="headerItem.inputSelect":label="headerItem.label":prop="headerItem.prop":key="headerIndex"><template #header><el-popover placement="bottom" title="请选择" trigger="click"><div slot="reference" class="search-header"><span class="search-title">{{ headerItem.label }}</span><i class="search-icon el-icon-search"></i></div><el-input /></el-popover></template><template slot-scope="scope">{{ scope.row[headerItem.prop] }}</template></el-table-column><el-table-column v-else :label="headerItem.label" :prop="headerItem.prop" :key="headerIndex"></el-table-column></template></el-table>
</template>

7，js代码

export default {data() {return {headerData: [{label: '日期',prop: 'date',dateSelect: true,},{label: '名称',prop: 'name',inputSelect: true,},{label: '类型',prop: 'type',select: true,selectValue: null,selectOptions: [{value: 'Vue',label: 'Vue',},{value: 'React',label: 'React',},{value: 'Angular',label: 'Angular',},],},],tableData: [{date: '2016-05-02',name: '王小虎',type: 'Vue',},{date: '2016-05-04',name: '王小虎',type: 'React',},{date: '2016-05-01',name: '王小虎',type: 'Angular',},],}},
}

Element 中表格表头添加搜索图标和功能使用相关推荐

Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
vue2 ElementUI 表单标签、表格表头添加问号图标提示
文章目录 1. 问题背景 2. element-ui悬浮提示定义 3. 基础 4. 延申 5. 参考 1. 问题背景使用element-ui有时候需要对表格的表头.表单的标签进行自定义,添加问号的悬 ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
element中表格排序空值问题
解决element自定义排序空值问题一.先添加属性代码先给html需要排序列中加上 :sortable="true" <el-table-column prop=&quo ...
html中给地址栏添加icon图标
<link rel="icon" href="images/logo.ico" type="image/x-icon"/> 也可 ...
给 element-ui 表格的表头添加icon图标
el-table icon图标的设置,使用 slot="header" 插槽,然后直接通过设置类名为 el-icon-iconName 来使用即可. <el-table-co ...
html表头纵向,vue、element实现表格表头纵向显示
大多数情况,我们的管理端都有表格展示数据,然而表格的展示基本都是表头横向展示,然后相应的数据一行一行排列在下方,我们先看一下element官网的el-table的样子: 那么我们如果想要让表头纵向展示 ...
wps文本中表格表头重复_WPS表格如何在每页都设置相同表头，原来是这样的
WPS表格是一款办公软件,该软件在表格制作和数据统计方面是非常强大的,我们在使用该软件制作表格时,常常需要将每一页都设置相同的表头,这是怎么操作的呢,一起来看看使用WPS表格如何在每页都设置相同表头的 ...
wps文本中表格表头重复_WPS表格设置打印表头让打印的每一页都显示相同的表头标题...
WPS表格设置打印表头让打印的每一页都显示相同的表头标题时间:2014-01-13 作者:snow 来源:互联网制作出来的WPS表格只有一个表头,打印时要分几页,这个表头如何设置?打印的时 ...

Element 中表格表头添加搜索图标和功能使用

Element 中表格表头添加搜索图标和功能使用相关推荐

最新文章

热门文章