vue修改Element的el-table樣式的4種方法

更新時間：2020年09月17日 11:34:41 作者：guoqi

這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

修改Element中的el-table樣式，可以使用以下幾種方法：

　　1. row-style 行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有行設置一樣的 Style。

　　2. cell-style 單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有單元格設置一樣的 Style。

　　3. header-row-style 表頭行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭行設置一樣的 Style。

　　4. header-cell-style 表頭單元格的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有表頭單元格設置一樣的 Style。

示例代碼如下：

<template>
  <div>
    <div style="width:700px;margin: 0 auto;">
    <el-table
      :data="tableData"
      height="300"
      border
      stripe="true"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
      style="width: 100%">
      <el-table-column
        prop="tag"
        label="tag"
        width="150">
      </el-table-column>
      <el-table-column
        prop="confidence"
        label="confidence"
        width="180">
      </el-table-column>
      <el-table-column
        prop="category_tag_level"
        label="category_tag_level">
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>

  export default{
    data () {
      return {
        tableData: [{
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '體育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }]

      }
    },
    methods:{
      //設置表格行的樣式
      tableRowStyle({row,rowIndex}){
        return 'background-color:pink;font-size:15px;'
      },
      //設置表頭行的樣式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'

      }
    }
  }
</script>
<style>
</style>

效果如下所示：

以上就是vue修改Element的el-table樣式的4種方法的詳細內(nèi)容，更多關于vue修改Element的el-table樣式的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue批量圖片顯示時遇到的路徑被解析問題
這篇文章主要介紹了Vue批量圖片顯示時遇到的路徑被解析問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
vue的狀態(tài)更新方式(異步更新解決)
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
Vue3實現(xiàn)SSE(Server-Sent?Events)連接
SSE?是一種允許服務器向瀏覽器推送事件的技術(shù),這篇文章主要為大家詳細介紹了如何通過vue3實現(xiàn)SSE(Server-Sent?Events)連接,有需要的小伙伴可以了解下
2024-10-10
查找Vue中下標的操作(some和findindex)
這篇文章主要介紹了查找Vue中下標的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
使用Axios攔截器中止Vue請求的步驟詳解
假設?App?的用戶可以在短時間內(nèi)進行多個?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進行的請求變得無關緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請求,需要的朋友可以參考下
2023-11-11
Vue3如何獲取來源路由
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue 實現(xiàn)cli3.0中使用proxy進行代理轉(zhuǎn)發(fā)
今天小編就為大家分享一篇vue 實現(xiàn)cli3.0中使用proxy進行代理轉(zhuǎn)發(fā)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue實現(xiàn)簡單的分頁功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細,需要的朋友可以參考下
2024-05-05