Element-UI中關于table表格的那些騷操作

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

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

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

# 開啟本地服務器localhost
npm run dev

項目地址:
https://github.com/Hanxueqing/Element-table

自定義列的內容

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

image

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

            <template slot-scope="scope">
              <el-button size="mini" type="primary">編輯</el-button>
              <el-button size="mini" type="danger">刪除</el-button>
            </template>
          </el-table-column>
image

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>

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

image

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屬性值

image

可以通過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

image

header-cell-class-name

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

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

函數形式:將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 的回調方法,也可以使用一個固定的 Object 為所有表頭單元格設置一樣的 Style。

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

函數形式:將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 的回調方法,也可以使用字符串為所有表頭行設置一個固定的 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:

image

所以想讓添加在tr上的樣式顯示,需要關閉element-ui中原本的th的樣式,否則會被覆蓋!(例如背景色)

image

header-cell-class-name:

image

header-row-style

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

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

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

設置行樣式

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

image

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

<el-table 
          :data="tableData[lang]" 
          class="table" 
          border 
          :row-style="tableRowStyle"
        >

編寫tableRowStyle方法,返回樣式

// 修改table tr行的背景色
      tableRowStyle ({ row, rowIndex }) {
        return 'background-color:#ecf5ff'
      }

點擊按鈕操作當前行

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

image

通過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指令實現按鈕的顯示與隱藏

{
          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

<el-table 
          :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)'
        }
      }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380