給表格的单元格的字体颜色

最新推荐文章于 2022-09-07 20:00:57 发布

weixin_63769623

最新推荐文章于 2022-09-07 20:00:57 发布

阅读量284

点赞数

分类专栏： vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_63769623/article/details/124128956

版权

vuejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这段代码展示了一个在Element UI的el-table-column中使用el-tag组件来显示表格列的‘是否禁用’状态，并通过getTagType函数根据状态值动态设置tag的颜色。sfktFormate函数用于将状态值转换为友好的文字描述，getTagType函数则根据状态值返回对应的颜色标识，如'success'表示启用，可能的颜色还有其他。

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

添加<el-tag>标签，用getTagType()获取颜色

<el-table-column prop="status" label="是否禁用" min-width="200"  sortable >  
                <template slot-scope="scope">
                    <div slot="reference">
                        <el-tag
                        size="medium"
                        :type="getTagType(scope.row.status)"
                        effect="plain"
                        >{{ sfktFormate(scope.row.status) }}</el-tag
                        >
                    </div>
                </template>
</el-table-column>

sfktFormate(status) {
             if (status == 1) {
                return "啟用";
            } else if (status == 4) {
                return "禁用";
            }
        },
        getTagType(status) {
            switch (status) {
                case "1":
                return "success";
                case "4":
                return "success";
                default:
                break;
            }
        },