zoukankan      html  css  js  c++  java
  • vue修改Element的el-table样式

    修改Element中的el-table样式,可以使用以下几种方法:

      1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。

      2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

      3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

      4. header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

    示例代码如下:

    <template>
        <div>
            <div style="700px;margin: 0 auto;">
            <el-table
                :data="tableData"
                height="300"
                border
                stripe="true"
                :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor"
                style=" 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>

    效果如下所示:

  • 相关阅读:
    P1990 覆盖墙壁题解
    golang学习笔记---在接口和类型之间转换
    golang学习笔记 --- HTTP 客户端
    golang学习笔记 ----interface(接口3)
    golang学习笔记---上下文 context
    golang学习笔记 ----interface(接口)
    golang学习笔记---channel&goroutine
    golang学习笔记---select(3)
    golang 学习笔记 ---select关键字用法
    golang学习笔记---channel(2)
  • 原文地址:https://www.cnblogs.com/gg-qq/p/10844020.html
Copyright © 2011-2022 走看看