element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)的示例代碼
更新時(shí)間：2023年12月25日 16:02:57 作者：LXXgalaxy
這篇文章主要介紹了element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài),代碼部分分為dom部分和data部分及css部分,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)
dom部分：
<el-table-column label="是否異常">
<template slot-scope="scope">
<div class="dcs_sf_red" v-if="scope.row.sfyc == 0"></div>
<div class="dcs_sf_green" v-if="scope.row.sfyc == 1"></div>
</template>
</el-table-column>data部分：
data [
{
date: '00:00',
mode: '固定模式',
jhz: 120,
sfyc: 0,
sjz: 120,
sfxy: 1,
fkz: 110,
cgfs: 1,
}]css部分
.dcs_sf_red{
margin-left: 30%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FE685D;
}
.dcs_sf_green{
margin-left: 30%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #5DFE96;
}element-plus的表格固定列不變顏色的解決辦法
前言:有的行需要變顏色 所以我們用到了row-class-name方法 但是固定列沒有變顏色
<el-table :row-class-name="tableRowClassName">xxx</el-table>
const tableRowClassName = (value) => {
if (JSON.stringify(row.stopApplyType) != 'null') {
console.log('停發(fā)')
return 'error-row'
} else {
return ''
}
}
<style>
.el-table .error-row {
--el-table-tr-bg-color: var(--el-color-error-light-9);
}
</style>
這樣是非常不美觀的 所以我看了一下固定列的css 綁定的class
然后我們?cè)赼pp.vue加入以下代碼
.el-table-fixed-column–left 是針對(duì)固定在左側(cè)的固定列
.el-table-fixed-column–right 是針對(duì)固定在右側(cè)的固定列
//紅色的
.el-table .error-row {
--el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .error-row .el-table-fixed-column--left {
background-color: #fef0f0;
}
.el-table .error-row .el-table-fixed-column--right {
background-color: #fef0f0;
}
這樣的話就變美觀了很多 解決問題！
到此這篇關(guān)于element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)的文章就介紹到這了,更多相關(guān)element-table表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
js判斷iframe內(nèi)的網(wǎng)頁(yè)是否滾動(dòng)到底部觸發(fā)事件
這篇文章主要介紹了js判斷iframe內(nèi)的網(wǎng)頁(yè)是否滾動(dòng)到底部觸發(fā)事件,需要的朋友可以參考下2014-03-03
JavaScript制作簡(jiǎn)易計(jì)算器（不用eval）
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)易計(jì)算器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案
本文詳細(xì)介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案,包括核心實(shí)現(xiàn)流程、關(guān)鍵增強(qiáng)功能、常見問題處理以及最佳實(shí)踐建議,方案推薦使用FileSaver.js,適用于中型以上項(xiàng)目,需要的朋友可以參考下2025-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了詳解寫好JS條件語句的5條守則，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
javascript簡(jiǎn)單進(jìn)制轉(zhuǎn)換實(shí)現(xiàn)方法
這篇文章主要介紹了javascript簡(jiǎn)單進(jìn)制轉(zhuǎn)換實(shí)現(xiàn)方法,涉及javascript字符串轉(zhuǎn)換與數(shù)值操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
JavaScript 組件之旅（一）分析和設(shè)計(jì)
毫無疑問，JavaScript 是一種非常靈活的腳本語言，有時(shí)候它像一只難以馴服的野馬——你受益于它的靈活性的同時(shí)，也要時(shí)刻提防它變得失去控制2009-10-10
js實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
顯示js對(duì)象所有屬性和方法，從網(wǎng)上整理了不少，大家可以看下原理都是差不多的。2009-10-10