elementui 单元格添加样式的两种方法

小小1992

已于 2024-09-14 16:36:24 修改

阅读量186

点赞数 1

文章标签： elementui 前端 javascript

于 2024-09-14 16:31:23 首次发布

本文链接：https://blog.csdn.net/u014645827/article/details/142261648

版权

方法一

<el-table-column fixed prop="name" label="姓名" width="120">
<<template scope="scope">
<span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span>
</template>
</el-table-column>

方法二

el-table标签上添加:cell-class-name="classmeth"。

<el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth">

classmeth({
row,
column,
rowIndex,
columnIndex
}) {

// console.log(row, column, rowIndex, columnIndex)
if (row.color === 1 && columnIndex == 1) {
return 'red'
}
},

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- <script src="/utility/lzmain.js"></script>
    <script src="/utility/lzmain-form.js"></script> -->
    <!-- 引入ele -->
    <link rel="stylesheet" href="../js/vue/index.css">


    <style>
        /*滚动条的宽度划过时变大*/
        /*#region************浏览器默认滚动条通用google滚动条*/
        
         ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.01);
        }
        
         ::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0);
        }
        
         ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        *::-webkit-scrollbar:hover {
            transition: all 0.25s ease 0s, width 0.1s ease 0.15s, height 0.1s ease 0.15s;
        }
        
        *:focus::-webkit-scrollbar-thumb,
        *:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.25);
            -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        }
        /* 表头样式 */
        
        .has-gutter .cell {
            font-weight: 600;
        }
        
        .el-table th.el-table__cell>.cell {
            color: #555;
        }
        /* 字体颜色 */
        
        .yell {
            color: yellow;
        }
        
        .green {
            color: green;
        }
        
        .red {
            color: red;
        }
    </style>

    <body>
        <div id="data">
            <div class="table-div">
             
                <el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth">
                    <el-table-column fixed prop="date" label="日期" width="150">
                    </el-table-column>
                    <el-table-column fixed prop="name" label="姓名" width="120">
                        <!--  方法一-->
                        <!-- <template scope="scope">
                            <span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="province" label="省份" width="120">
                    </el-table-column>
                    <el-table-column prop="city" label="市区" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" width="300">
                    </el-table-column>
                    <el-table-column prop="zip" label="邮编" width="120">
                    </el-table-column>
                </el-table>
            </div>
            <div class="model-div  el-popover">
                111
            </div>
        </div>
        <script src="../js/vue/vue.js"></script>
        <!-- 放在最下面 -->
        <script src="../js/vue/ele-index.js"></script>
        <script>
            new Vue({
                el: '#data',
                data() {
                    return {

                        tableData3: [{
                            color: 1,
                            date: '2016-05-03',
                            name: '王小虎1',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333,
                        }, {
                            color: 1,
                            date: '2016-05-02',
                            name: '王小虎3',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }, {
                            color: 3,
                            date: '2016-05-04',
                            name: '王小虎4',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }, {
                            color: 1,
                            date: '2016-05-01',
                            name: '王小虎5',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }, {
                            color: 3,
                            date: '2016-05-08',
                            name: '王小虎',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }, {
                            color: 2,
                            date: '2016-05-06',
                            name: '王小虎',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }, {
                            color: 2,
                            date: '2016-05-07',
                            name: '王小虎',
                            province: '上海',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: 200333
                        }]
                    }
                },
                methods: {
                    //方法2
                    classmeth({
                        row,
                        column,
                        rowIndex,
                        columnIndex
                    }) {

                        // console.log(row, column, rowIndex, columnIndex)
                        if (row.color === 1 && columnIndex == 1) {
                            return 'red'
                        }
                    },
                },
            })
        </script>
    </body>

</html>