使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
更新時(shí)間：2022年07月29日 09:45:15 作者：小火車(chē)況且況且
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Element 表格表頭添加搜索圖標(biāo)和功能
主要實(shí)現(xiàn) table的slot=‘header’
headerData是表頭的循環(huán)數(shù)組tableData是表格內(nèi)容的數(shù)組<template slot="header"></template>自定義表頭的內(nèi)容- 注意：在使用
<template slot="header"></template>的時(shí)候，只會(huì)顯示表頭的自定義內(nèi)容，表格的內(nèi)容還需要使用<template slot-scope="scope"> {{ scope.row }} </template>scope.row會(huì)顯示出該列的所有內(nèi)容 - 如果
<template slot='header'></template>不使用slot-scope='scope'會(huì)出現(xiàn)不能輸入的問(wèn)題 Vue 2.6+版本的插槽語(yǔ)法使用#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="請(qǐng)選擇" 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="請(qǐng)選擇">
<el-option
v-for="item in headerItem.selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-popover>
</template>
<!-- 表格的 內(nèi)容 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="請(qǐng)選擇" 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="開(kāi)始日期"
end-placeholder="結(jié)束日期"
>
</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="請(qǐng)選擇" 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: '名稱(chēng)',
prop: 'name',
inputSelect: true,
},
{
label: '類(lèi)型',
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圖標(biāo)
設(shè)置 Scoped slot 來(lái)自定義表頭
<el-table :data="mockTableData" style="width: 100%">
<el-table-column prop="status">
<template slot="header">類(lèi)型 <i class="icon"></i></template>
</el-table-column>
</el-table>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用mounted和created時(shí),this無(wú)法指向data中的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue使用mounted和created時(shí),this無(wú)法指向data中的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
今天小編就為大家分享一篇vue form 表單提交后刷新頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫(kù)進(jìn)行交互的方法,所以趕緊寫(xiě)一篇這樣的文章出來(lái),下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04
如何在Vue單頁(yè)面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)
為什么要在標(biāo)題里加上一個(gè)業(yè)務(wù)數(shù)據(jù)的上報(bào)呢，因?yàn)樵谠蹅兦岸隧?xiàng)目中，可上報(bào)的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁(yè)面錯(cuò)誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點(diǎn)。2021-05-05
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了vue原生input輸入框原理剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見(jiàn)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue3.x中使用element-plus的各種方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04