最近的項目中使用到element-ui組件庫，由于做的是后臺管理系統，所以經常需要操作表格，編輯樣式的過程中遇到一些問題，官網針對table給出了很多的api，自己可以自定義，基本能滿足產品需求，但是沒有給出具體的案例，網上的資料也比較簡略，這里簡單整理下一些常用的操作，如果有類似的功能可以做一個參考。

具體的使用方法還是建議仔細閱讀官網-table章節：

該項目demo已上傳github，歡迎大家下載：

# 克隆到本地

git clone git@github.com:Hanxueqing/Element-table.git

# 安裝依賴

npm install

# 開啟本地服務器localhost

npm run dev

自定義列的內容

需求：在表格最后一欄添加操作按鈕

通過slot-scope="scope"添加操作按鈕，這是專門為我們提供的插槽，方便自定義添加不同的內容。

編輯

刪除

scope.$index 獲取當前行下標

添加進來的操作按鈕可以通過scope.$index可以獲取當前行對應的下標

點擊顯示當前行下標

根據下標可以對指定某一行進行操作

scope.row 獲取當前屬性值

通過scope.row.屬性名可以獲取當前行對應的屬性值

點擊獲取姓名屬性

點擊按鈕獲得當前行的name屬性值

可以通過scope.row.屬性名和三目運算符給特殊的屬性值設定樣式

{{scope.row.name}}

編寫specialColor樣式，將字體顏色設置為紅色

.specialColor{

color:red;

}

設置表頭樣式

需求：將表頭樣式改為背景色藍色，字體顏色白色，字重400

header-cell-class-name

說明：表頭單元格的 className 的回調方法，也可以使用字符串為所有表頭單元格設置一個固定的 className。

類型：Function({row, column, rowIndex, columnIndex})/String

函數形式：將headerStyle方法傳遞給header-cell-class-name

:data="tableData[lang]"

class="table"

stripe

border

:header-cell-class-name="headerStyle"

>

編寫headerStyle，返回class名稱tableStyle

headerStyle ({row, column, rowIndex, columnIndex}) {

return 'tableStyle'

}

在style中編寫tableStyle樣式

.tableStyle{

background-color: #1989fa!important;

color:#fff;

font-weight:400;

}

字符串形式：直接將tableStyle名稱賦值給header-cell-class-name

:data="tableData[lang]"

class="table"

stripe

border

header-cell-class-name="tableStyle"

>

header-cell-style

說明：表頭單元格的 style 的回調方法，也可以使用一個固定的 Object 為所有表頭單元格設置一樣的 Style。

類型：Function({row, column, rowIndex, columnIndex})/Object

函數形式：將tableHeaderStyle方法傳遞給header-cell-style

: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;'

}

對象形式：直接在對象中編寫樣式

:data="tableData[lang]"

class="table"

stripe

border

:header-cell-style="{

'background-color': '#1989fa',

'color': '#fff',

'font-weight': '400'

}">

header-row-class-name

說明：表頭行的className 的回調方法，也可以使用字符串為所有表頭行設置一個固定的 className。

類型：Function({row, rowIndex})/String

使用方式與header-cell-class-name類似

注意：header-row-class-name與header-cell-class-name的區別：

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 的回調方法，也可以使用一個固定的 Object 為所有表頭行設置一樣的 Style。

類型：Function({row, rowIndex})/Object

使用方式與header-cell-style類似

設置行樣式

需求：將表格中行的背景色設置為淺藍色

row-class-name

說明：行的 className 的回調方法，也可以使用字符串為所有行設置一個固定的 className。

類型：Function({row, rowIndex})/String

使用方式與header-cell-class-name類似

row-style

說明：行的 style 的回調方法，也可以使用一個固定的 Object 為所有行設置一樣的 Style。

類型：Function({row, rowIndex})/Object

使用方式與header-cell-style類似

函數形式：將tableRowStyle方法傳給row-style

:data="tableData[lang]"

class="table"

border

:row-style="tableRowStyle"

>

編寫tableRowStyle方法，返回樣式

// 修改table tr行的背景色

tableRowStyle ({ row, rowIndex }) {

return 'background-color:#ecf5ff'

}

### 點擊按鈕操作當前行

需求：點擊操作欄的按鈕，切換按鈕狀態，并且將當前行置灰

通過slot-scope添加按鈕

禁用該行

啟用該行

在每一個data中添加buttonVisible字段，使用v-if/v-else指令實現按鈕的顯示與隱藏

{

date: '2016-05-10',

name: '王大虎',

address: '上海市普陀區金沙江路 1518 弄',

zip: 200333,

buttonVisible: true

}

編寫changeTable方法，點擊按鈕的時候更改buttonVisible的值

changeTable (buttonVisible, index) {

this.tableData[index].buttonVisible = !buttonVisible

}

給el-table添加row-style，并且將tableRowStyle方法傳遞給row-style

:data="tableData"

class="table"

border

:row-style="tableRowStyle"

>

編寫tableRowStyle方法，根據每一行buttonVisible的值設置背景色

// 修改table tr行的背景色

tableRowStyle ({ row, rowIndex }) {

if (this.tableData[rowIndex].buttonVisible === false) {

return 'background-color: rgba(243,243,243,1)'

}

}

總結

以上是生活随笔為你收集整理的elementui表格复制_Element-UI中关于table表格的那些骚操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。