快捷導(dǎo)航

Element-UI中關(guān)于table表格的那些騷操作(小結(jié))

更新時(shí)間：2019年08月15日 10:25:07 作者：視覺(jué)派Pie

這篇文章主要介紹了Element-UI中關(guān)于table表格的那些騷操作(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近的項(xiàng)目中使用到element-ui組件庫(kù)，由于做的是后臺(tái)管理系統(tǒng)，所以經(jīng)常需要操作表格，編輯樣式的過(guò)程中遇到一些問(wèn)題，官網(wǎng)針對(duì)table給出了很多的api，自己可以自定義，基本能滿足產(chǎn)品需求，但是沒(méi)有給出具體的案例，網(wǎng)上的資料也比較簡(jiǎn)略，這里簡(jiǎn)單整理下一些常用的操作，如果有類似的功能可以做一個(gè)參考。

具體的使用方法還是建議仔細(xì)閱讀官網(wǎng)-table章節(jié)：

https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

該項(xiàng)目demo已上傳github，歡迎大家下載：

# 克隆到本地
git clone git@github.com:Hanxueqing/Element-table.git

# 安裝依賴
npm install

# 開(kāi)啟本地服務(wù)器localhost
npm run dev

項(xiàng)目地址：

https://github.com/Hanxueqing/Element-table

自定義列的內(nèi)容

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

通過(guò)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 獲取當(dāng)前行下標(biāo)

添加進(jìn)來(lái)的操作按鈕可以通過(guò)scope.$index可以獲取當(dāng)前行對(duì)應(yīng)的下標(biāo)

<el-table-column label="操作" width="160">
   <template slot-scope="scope">
    <el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">點(diǎn)擊顯示當(dāng)前行下標(biāo)</el-button>
   </template>
   </el-table-column>

根據(jù)下標(biāo)可以對(duì)指定某一行進(jìn)行操作

scope.row 獲取當(dāng)前屬性值

通過(guò)scope.row.屬性名可以獲取當(dāng)前行對(duì)應(yīng)的屬性值

<el-table-column label="操作" width="160">
   <template slot-scope="scope">
    <el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">點(diǎn)擊獲取姓名屬性</el-button>
   </template>
   </el-table-column>

點(diǎn)擊按鈕獲得當(dāng)前行的name屬性值

可以通過(guò)scope.row.屬性名和三目運(yùn)算符給特殊的屬性值設(shè)定樣式

<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樣式，將字體顏色設(shè)置為紅色

.specialColor{
 color:red;
 }

設(shè)置表頭樣式

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

header-cell-class-name

說(shuō)明：表頭單元格的 className 的回調(diào)方法，也可以使用字符串為所有表頭單元格設(shè)置一個(gè)固定的 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

說(shuō)明：表頭單元格的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有表頭單元格設(shè)置一樣的 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;'
  }

對(duì)象形式：直接在對(duì)象中編寫樣式

<el-table 
   :data="tableData[lang]" 
   class="table" 
   stripe 
   border 
   :header-cell-style="{
   'background-color': '#1989fa',
   'color': '#fff',
   'font-weight': '400'
  }">

header-row-class-name

說(shuō)明：表頭行的className 的回調(diào)方法，也可以使用字符串為所有表頭行設(shè)置一個(gè)固定的 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上的樣式顯示，需要關(guān)閉element-ui中原本的th的樣式，否則會(huì)被覆蓋！（例如背景色）

header-cell-class-name:

header-row-style

說(shuō)明：表頭行的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有表頭行設(shè)置一樣的 Style。

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

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

設(shè)置行樣式

需求：將表格中行的背景色設(shè)置為淺藍(lán)色

row-class-name

說(shuō)明：行的 className 的回調(diào)方法，也可以使用字符串為所有行設(shè)置一個(gè)固定的 className。

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

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

row-style

說(shuō)明：行的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有行設(shè)置一樣的 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'
  }

點(diǎn)擊按鈕操作當(dāng)前行

需求：點(diǎn)擊操作欄的按鈕，切換按鈕狀態(tài)，并且將當(dāng)前行置灰

通過(guò)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>

在每一個(gè)data中添加buttonVisible字段，使用v-if/v-else指令實(shí)現(xiàn)按鈕的顯示與隱藏

{
   date: '2016-05-10',
   name: '王大虎',
   address: '上海市普陀區(qū)金沙江路 1518 弄',
   zip: 200333,
   buttonVisible: true
  }

編寫changeTable方法，點(diǎn)擊按鈕的時(shí)候更改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的值設(shè)置背景色

// 修改table tr行的背景色
  tableRowStyle ({ row, rowIndex }) {
  if (this.tableData[rowIndex].buttonVisible === false) {
   return 'background-color: rgba(243,243,243,1)'
  }
  }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: