亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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 為所有行設(shè)置一樣的 Style。

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

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

  4. header-cell-style 表頭單元格的 style 的回調(diào)方法,也可以使用一個固定的 Object 為所有表頭單元格設(shè)置一樣的 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:{
      //設(shè)置表格行的樣式
      tableRowStyle({row,rowIndex}){
        return 'background-color:pink;font-size:15px;'
      },
      //設(shè)置表頭行的樣式
      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)容,更多關(guān)于vue修改Element的el-table樣式的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue2使用eventbus踩坑解決

    vue2使用eventbus踩坑解決

    這篇文章主要為大家介紹了vue2使用eventbus踩坑解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • Vue項目配置router.js流程分析講解

    Vue項目配置router.js流程分析講解

    第一次寫Vue項目,要用到router.js,看了一下官方文檔,還是很懵逼,不知道怎么配置,又去看視頻查資料,最后終于搞定了。話不多說,先上代碼,我再講一些要注意的細節(jié)
    2022-12-12
  • vue+echarts實現(xiàn)可拖動節(jié)點的折線圖(支持拖動方向和上下限的設(shè)置)

    vue+echarts實現(xiàn)可拖動節(jié)點的折線圖(支持拖動方向和上下限的設(shè)置)

    制作一個折線圖用于顯示當前24小時的數(shù)據(jù),并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù),接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖(支持拖動方向和上下限的設(shè)置),感興趣的朋友跟隨一起學習吧
    2019-04-04
  • 淺談Vue項目骨架屏注入實踐

    淺談Vue項目骨架屏注入實踐

    這篇文章主要介紹了淺談Vue項目骨架屏注入實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • vue引入axios同源跨域問題

    vue引入axios同源跨域問題

    這篇文章主要介紹了vue引入axios同源跨域問題,文章給大家提供了解決方案,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • vue之瀏覽器存儲方法封裝實例

    vue之瀏覽器存儲方法封裝實例

    下面小編就為大家分享一篇vue之瀏覽器存儲方法封裝實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Map.vue基于百度地圖組件重構(gòu)筆記分享

    Map.vue基于百度地圖組件重構(gòu)筆記分享

    這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vue中使用localStorage存儲token并設(shè)置時效

    Vue中使用localStorage存儲token并設(shè)置時效

    這篇文章主要為大家介紹了Vue中使用localStorage存儲token并設(shè)置時效,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue中向data添加新屬性的三種方式小結(jié)

    vue中向data添加新屬性的三種方式小結(jié)

    這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中nextTick函數(shù)和react類似實現(xiàn)代碼

    vue中nextTick函數(shù)和react類似實現(xiàn)代碼

    Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下
    2024-04-04

最新評論