使用Element实现表格表头添加搜索图标和功能
更新时间：2022年07月29日 09:45:15 作者：小火车况且况且
这篇文章主要介绍了使用Element实现表格表头添加搜索图标和功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Element 表格表头添加搜索图标和功能
主要实现 table的slot=‘header’
headerData是表头的循环数组tableData是表格内容的数组<template slot="header"></template>自定义表头的内容- 注意：在使用
<template slot="header"></template>的时候，只会显示表头的自定义内容，表格的内容还需要使用<template slot-scope="scope"> {{ scope.row }} </template>scope.row会显示出该列的所有内容 - 如果
<template slot='header'></template>不使用slot-scope='scope'会出现不能输入的问题 Vue 2.6+版本的插槽语法使用#header替换<template slot='header' slot-scope='scope'></template>Vue的作用域插槽
<template>
<el-table :data="tableData" style="width: 100%">
<template v-for="(headerItem, headerIndex) in headerData">
<!-- 下拉框选择器 -->
<el-table-column
v-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-option
v-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-column
v-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-picker
type="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-column
v-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>
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 ui表格el-tabel给表头加icon图标
设置 Scoped slot 来自定义表头
<el-table :data="mockTableData" style="width: 100%">
<el-table-column prop="status">
<template slot="header">类型 <i class="icon"></i></template>
</el-table-column>
</el-table>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决Vue运行项目报错proxy error: could not proxy request
这篇文章主要给大家介绍了关于如何解决Vue运行项目报错proxy error:could not proxy request的相关资料,Proxy Error指的是代理服务器无法正确处理请求的错误,需要的朋友可以参考下2023-08-08
使用vue开发的web项目中使用图表,可以使用v-charts,本文主要介绍了vue3中使用Vchart的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？感兴趣得话一起来看看下面文章得小心内容吧2021-11-11
这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue路由跳转到新页面实现置顶问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,2023-09-09
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据，这篇文章主要介绍了VUE中常用的4种高级方法,需要的朋友可以参考下2023-05-05
vue cli3.0结合echarts3.0与地图的使用方法示例
这篇文章主要给大家介绍了关于vue cli3.0结合echarts3.0与地图的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
我们在Vue.js项目中经常需要引用图片,所以下面这篇文章主要介绍了关于在Vue页面中如何更优雅地引入图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧2019-12-12
最新评论