最近的項目中使用到element-ui組件庫，由于做的是后臺管理系統(tǒng)，所以經(jīng)常需要操作表格，編輯樣式的過程中遇到一些問題，官網(wǎng)針對table給出了很多的api，自己可以自定義，基本能滿足產(chǎn)品需求，但是沒有給出具體的案例，網(wǎng)上的資料也比較簡略，這里簡單整理下一些常用的操作，如果有類似的功能可以做一個參考。
具體的使用方法還是建議仔細閱讀官網(wǎng)-table章節(jié)：
https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot
該項目demo已上傳github，歡迎大家下載：
# 克隆到本地git clone git@github.com:Hanxueqing/Element-table.git# 安裝依賴npm install# 開啟本地服務器localhostnpm run dev
項目地址：
https://github.com/Hanxueqing/Element-table
自定義列的內(nèi)容
需求：在表格最后一欄添加操作按鈕
通過slot-scope="scope"添加操作按鈕，這是專門為我們提供的插槽，方便自定義添加不同的內(nèi)容。
<template slot-scope="scope"> <el-button size="mini" type="primary">編輯</el-button> <el-button size="mini" type="danger">刪除</el-button> </template> </el-table-column>
scope.$index 獲取當前行下標
添加進來的操作按鈕可以通過scope.$index可以獲取當前行對應的下標
<el-table-column label="操作" width="160"> <template slot-scope="scope"> <el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">點擊顯示當前行下標</el-button> </template> </el-table-column>
根據(jù)下標可以對指定某一行進行操作
scope.row 獲取當前屬性值
通過scope.row.屬性名可以獲取當前行對應的屬性值
<el-table-column label="操作" width="160"> <template slot-scope="scope"> <el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">點擊獲取姓名屬性</el-button> </template> </el-table-column>
點擊按鈕獲得當前行的name屬性值
可以通過scope.row.屬性名和三目運算符給特殊的屬性值設定樣式
<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200"> <template slot-scope="scope"> <div :class="scope.row.name === '王大虎' ? 'specialColor':''">{{scope.row.name}}</div> </template> </el-table-column>編寫specialColor樣式，將字體顏色設置為紅色
.specialColor{ color:red; }設置表頭樣式
需求：將表頭樣式改為背景色藍色，字體顏色白色，字重400
header-cell-class-name
說明：表頭單元格的 className 的回調(diào)方法，也可以使用字符串為所有表頭單元格設置一個固定的 className。
類型：Function({row, column, rowIndex, columnIndex})/String
函數(shù)形式：將headerStyle方法傳遞給header-cell-class-name
<el-table :data="tableData[lang]" class="table" stripe border :header-cell-class-name="headerStyle" >
編寫headerStyle，返回class名稱tableStyle
headerStyle ({row, column, rowIndex, columnIndex}) { return 'tableStyle' }在style中編寫tableStyle樣式
<style lang = "scss"> .tableStyle{ background-color: #1989fa!important; color:#fff; font-weight:400; }</style>字符串形式：直接將tableStyle名稱賦值給header-cell-class-name
<el-table :data="tableData[lang]" class="table" stripe border header-cell-class-name="tableStyle" >
header-cell-style
說明：表頭單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭單元格設置一樣的 Style。
類型：Function({row, column, rowIndex, columnIndex})/Object
函數(shù)形式：將tableHeaderStyle方法傳遞給header-cell-style
<el-table :data="tableData[lang]" class="table" stripe border :header-cell-style='tableHeaderStyle' >
編寫tableHeaderStyle方法，返回樣式
tableHeaderStyle ({row, column, rowIndex, columnIndex}) { return 'background-color:#1989fa;color:#fff;font-weight:400;' }對象形式：直接在對象中編寫樣式
<el-table :data="tableData[lang]" class="table" stripe border :header-cell-style="{ 'background-color': '#1989fa', 'color': '#fff', 'font-weight': '400' }">header-row-class-name
說明：表頭行的className 的回調(diào)方法，也可以使用字符串為所有表頭行設置一個固定的 className。
類型：Function({row, rowIndex})/String
使用方式與header-cell-class-name類似
注意：header-row-class-name與header-cell-class-name的區(qū)別：
header-row-class-name是添加在tr上面的，header-cell-class-name是添加在th上面的。
header-row-class-name:
所以想讓添加在tr上的樣式顯示，需要關閉element-ui中原本的th的樣式，否則會被覆蓋！（例如背景色）
header-cell-class-name:
header-row-style
說明：表頭行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭行設置一樣的 Style。
類型：Function({row, rowIndex})/Object
使用方式與header-cell-style類似
設置行樣式
需求：將表格中行的背景色設置為淺藍色
row-class-name
說明：行的 className 的回調(diào)方法，也可以使用字符串為所有行設置一個固定的 className。
類型：Function({row, rowIndex})/String
使用方式與header-cell-class-name類似
row-style
說明：行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有行設置一樣的 Style。
類型：Function({row, rowIndex})/Object
使用方式與header-cell-style類似
函數(shù)形式：將tableRowStyle方法傳給row-style
<el-table :data="tableData[lang]" class="table" border :row-style="tableRowStyle" >
編寫tableRowStyle方法，返回樣式
// 修改table tr行的背景色 tableRowStyle ({ row, rowIndex }) { return 'background-color:#ecf5ff' }點擊按鈕操作當前行
需求：點擊操作欄的按鈕，切換按鈕狀態(tài)，并且將當前行置灰
通過slot-scope添加按鈕
<el-table-column label="操作" width="160"> <template slot-scope="scope"> <el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用該行</el-button> <el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">啟用該行</el-button> </template> </el-table-column>
在每一個data中添加buttonVisible字段，使用v-if/v-else指令實現(xiàn)按鈕的顯示與隱藏
{ date: '2016-05-10', name: '王大虎', address: '上海市普陀區(qū)金沙江路 1518 弄', zip: 200333, buttonVisible: true }編寫changeTable方法，點擊按鈕的時候更改buttonVisible的值
changeTable (buttonVisible, index) { this.tableData[index].buttonVisible = !buttonVisible }給el-table添加row-style，并且將tableRowStyle方法傳遞給row-style
<el-table :data="tableData" class="table" border :row-style="tableRowStyle" >
編寫tableRowStyle方法，根據(jù)每一行buttonVisible的值設置背景色
// 修改table tr行的背景色 tableRowStyle ({ row, rowIndex }) { if (this.tableData[rowIndex].buttonVisible === false) { return 'background-color: rgba(243,243,243,1)' } }以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
