使用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+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-03Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實(shí)現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue?實(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