vue el-table實(shí)現(xiàn)自定義表頭
更新時(shí)間：2019年12月11日 15:50:03 作者：＊且聽風(fēng)吟
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)自定義表頭，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue el-table實(shí)現(xiàn)自定義表頭的具體代碼，供大家參考，具體內(nèi)容如下
el-table可以通過設(shè)置 Scoped slot 來實(shí)現(xiàn)自定義表頭。
文檔說明如下：
代碼實(shí)現(xiàn)：
<template>
<el-dialog
width="50%"
:visible.sync="isShow"
:before-close="beforeClose"
title="自定義設(shè)備類型屬性">
<div class="dialogDiv">
<el-table
:data="tableData.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
style="width: 100%" border>
<el-table-column prop="code"
:label="$t('basicData.device.propDlg.code')">
</el-table-column>
<el-table-column prop="maxValue"
:label="$t('basicData.device.propDlg.maxValue')">
</el-table-column>
<el-table-column prop="minValue"
:label="$t('basicData.device.propDlg.minValue')">
</el-table-column>
<el-table-column prop="name"
:label="$t('basicData.device.propDlg.name')">
</el-table-column>
<el-table-column prop="valueType"
:label="$t('basicData.device.propDlg.valueType')">
</el-table-column>
<el-table-column prop="warning"
:label="$t('basicData.device.propDlg.warning')">
</el-table-column>
<el-table-column align="center" width="160px">
<template slot="header" slot-scope="scope">
<el-button v-model="handleAdd"
size="mini"
type="success"
circle plain
icon="el-icon-plus"
@click="handleAdd(scope.$index, scope.row)">
</el-button>
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
circle plain
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)">
</el-button>
<el-button
size="mini"
type="danger"
circle plain
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer">
<el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
<el-button @click="confirm" type="primary">{{ $t('common.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
methods: {
// 添加
handleAdd() {
},
// 編輯
handleEdit(index, row) {
},
// 刪除
handleDelete(index, row) {
},
cancel() {
this.$emit("cancel")
},
confirm() {
this.$emit("confirm", this.tableData)
}
}
};
</script>
<style lang="scss" scoped>
.dialogDiv {
height: 300px;
overflow: auto;
}
</style>
頁面效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue3獲取url地址參數(shù),Vue3?獲取地址欄參數(shù)有兩個(gè)方式：查詢參數(shù)和路徑參數(shù)，文中結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前端分頁完整代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
利用Electron簡單擼一個(gè)Markdown編輯器的方法
這篇文章主要介紹了利用Electron簡單擼一個(gè)Markdown編輯器的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue使用Proxy實(shí)現(xiàn)雙向綁定的方法示例
這篇文章主要介紹了vue使用Proxy實(shí)現(xiàn)雙向綁定的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了Vuejs 中使用 markdown的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue3中輕松實(shí)現(xiàn)switch功能組件的全過程
這篇文章主要給大家介紹了關(guān)于vue3中輕松實(shí)現(xiàn)switch功能組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue實(shí)現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實(shí)現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲功能,Vue.js支持使用localStorage和sessionStorage來實(shí)現(xiàn)本地存儲,本文就來介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10