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

方法一

<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'
}
},

html 复制代码
<!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>
相关推荐
Devil枫19 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css