草庐IT

elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）

嘿……… 2023-08-22 原文

一、改变背景颜色
1、在el-table表头中添加属性：:cell-style=“addClass”

（设置表头背景颜色:header-cell-style=“{ background: ‘#F7FBFE’, color: ‘#000’ }”）

 <el-table border :header-cell-style="{ background: '#F7FBFE', color: '#000' }" :data="tableData" :cell-style="addClass" >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" label="日期" prop="date"></el-table-column>
                <el-table-column align="center" label="姓名" prop="Name"></el-table-column>
            </el-table>

2、data模拟假数据：

 data(){
        return{
            tableData:[
                {
                    date:'2023-02-01',
                    Name:'张三',
                }
            ],
        }
    },

3、在methods中：

addClass({row,column,rowIndex,columnIndex}){
    // console.log(row);
    // console.log(columnIndex);
    if(columnIndex === 2){
        if(row.Name == '张三'){
        return 'background: yellow;color:white';
        }
    }
},

二、鼠标移入改变背景、文字颜色
1、在el-table表头中添加属性：@cell-mouse-enter=“cellMouseEnter” @cell-mouse-leave=“cellMouseLeave”

 <el-table :data="tableData" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave" >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" label="日期" prop="date"></el-table-column>
                <el-table-column align="center" label="姓名" prop="Name"></el-table-column>
            </el-table>

2、data模拟假数据：

 data(){
        return{
            tableData:[
                {
                    date:'2023-02-01',
                    Name:'张三',
                }
            ],
        }
    },

3、在methods中：

cellMouseEnter(row, column, cell, event) {
   //console.log(column);
   //console.log(cell);
   // 移入姓名单元格，单元格边框变色
    if (column.property === 'Name') {
      cell.classList.add('cellClass');
    } 
  },
  // 移出单元格 恢复默认色
  cellMouseLeave(row, column, cell, event) {
    cell.classList.remove('cellClass');
},

4、在css中

<style lang="less" scoped>
	 /deep/ .el-table td.cellClass{
	    background-color: pink !important;
	    color:white
	  }
</style>

三、鼠标移入移出无背景颜色：
1、在el-table表头中添加属性：:cell-style=“tableClassName”

 <el-table :data="tableData" :cell-style="tableClassName">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" label="日期" prop="date"></el-table-column>
                <el-table-column align="center" label="姓名" prop="Name"></el-table-column>
            </el-table>

2、在methods中

tableRowClassName({row, rowIndex}) {
  return 'background: white;';
}
elementuitablespanclasstokenjavascript

有关elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）的更多相关文章

  1. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  5. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  6. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表，其中行实际上是2行表，一个嵌套表是..我怎样才能在Prawn中做到这一点？也许我需要延期..但哪一个？ 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

  7. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  8. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  10. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

随机推荐