Element-ui Table

最新推荐文章于 2024-01-03 15:24:54 发布

yzhSWJ

最新推荐文章于 2024-01-03 15:24:54 发布

阅读量123

点赞数

分类专栏： ECharts

本文链接：https://blog.csdn.net/yuzheh521/article/details/110370054

版权

ECharts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用Element-UI库来定制表格的行样式和单元格颜色。通过`:row-class-name`和`:cell-style`属性，实现了奇偶行背景色交替以及根据数据动态设置单元格颜色，例如当水位超过1.5时显示红色，否则显示绿色。同时，还设置了表头的背景色和字体颜色。

摘要由CSDN通过智能技术生成

<style>
  
    [v-cloak]{
        display: none;
    }

    /* 奇数行 */
    #con1  li:nth-child(odd){
        background: #f9f9f9;
    }
    /* 偶数行 */
    #con1 li:nth-child(even){
        background: #edf0f3;
    }
    .el-table .warning-row {
        background: #edf0f3;
    }

    .el-table .success-row {
        background:#f9f9f9;
    }
</style>
  <div style="width:100%;height: 100%;">
                <el-table
                        :data="csswTable"
                        //设置单元格样式,绑定一个方法
                        :cell-style="csswTableCellClassName"
                        height="100%"
                        //设置表头背景,和字体颜色
                        :header-cell-style="{background:'#cef1f9',color:'#5a9faf'}"
                        style="width: 100%;font-size: 0.6vw;"
                        //各行变色
                        :row-class-name="tableRowClassName"
                >
                    <el-table-column
                            prop="stnm"
                            align="center"
                            label="站名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="tm"
                            align="center"
                            label="时间">
                        <template slot-scope="scope">
                            <span style="color: #81a0ba">{{scope.row.tm}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="z"
                            align="center"
                            width="80"
                            label="水位">
                            /修改某一行
                              <template slot-scope="scope">
                            <span style="color: #81a0ba">{{scope.row.z}}</span>
                        </template>
                        
                    </el-table-column>
                </el-table>
            </div>

方法methods

 csswTableCellClassName({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 2) { //指定坐标
                    if (parseInt(row.z) > 1.5) {
                        return 'color:red'
                    } else {
                        return 'color:green';
                    }
                } else if (columnIndex === 3) { //指定坐标
                    return 'color:#006eff;cursor: pointer;'
                } else {
                    return ''
                }
            },
             tableRowClassName({row, rowIndex}) {
                if (rowIndex %2!=1) {
                    return 'warning-row';
                } else  {
                    return 'success-row';
                }

            },