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>

    效果如下所示:

  • 相关阅读:
    Java项目中加载properties文件的方式
    第十一篇 JVM之运行时数据区<7>: 本地方法栈
    第十七篇 JVM之运行时数据区<13>: 字符串常量池
    第十四篇 JVM之运行时数据区<10>: 对象分配过程
    基于zxing工具生成二维码
    第十八篇 JVM之运行时数据区<14>: 方法区的垃圾收集
    第十六篇 JVM之运行时数据区<12>: 方法区
    第十二篇 JVM之运行时数据区<8>: Java堆
    圣诞
    LeetCode 748 最短补全词
  • 原文地址:https://www.cnblogs.com/gg-qq/p/10844020.html
Copyright © 2011-2022 走看看