首页 > 其他分享 >[element-ui] table表格点击单元格,单元格改变背景色

[element-ui] table表格点击单元格,单元格改变背景色

时间:2024-01-23 17:45:57浏览次数:24  
标签:return column 单元格 element color ui table row

 

 <el-table
      :data="tableData"
      border
      @cell-click="cellclick"
      :cell-style="tableCellStyle">
</el-table>
data(){
  row:'',
  column:''
}
cellclick (row, column, cell, event) {
  this.row = row
  this.column = column
},

tableCellStyle (row, rowIndex, column) {
  if (this.row === row.row && this.column === row.column) {
    return 'background-color:#ccc;'
  } else {
    return 'background-color:#fff;'
  }
},

参考:https://blog.csdn.net/qq_14993591/article/details/124048716

标签:return,column,单元格,element,color,ui,table,row
From: https://www.cnblogs.com/zqlym/p/17982995

相关文章

  • Find min and max element in bst using iteration【1月23日学习笔记】
    点击查看代码#include<iostream>usingnamespacestd;structNode{intdata;Node*left,*right;};Node*newNode(intx){Node*temp=newNode;temp->data=x;temp->left=temp->right=NULL;returntemp;}voidin......
  • 【STM32使用Arduino编程0】Arduino_Core_STM32固件的安装和使用
    【STM32使用Arduino编程0】Arduino_Core_STM32固件的安装和使用对于STM32来说,使用Arduino编程可以大大降低编程难度,同时也可以使用Arduino的许多库。Arduino_Core_STM32介绍要使用Arduino对STM32进行编程需要使用相应的固件,目前官方的固件为Arduino_Core_STM32。对应的github......
  • Element Ui使用技巧——Form表单的校验规则rules详细说明
    ElementUi使用技巧——Form表单的校验规则rules详细说明:https://blog.csdn.net/weixin_46711427/article/details/117672462?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0-117672462-blog-124431947.235^v40^pc_relevant_rights_sort......
  • Java反编译工具 JD-GUI安装使用
    将源代码转换成二进制执行代码的过程叫“编译”,那么反编译就是将二进制执行代码转换成源代码。在java开发里,源代码是.java文件,然后经过编译后生成计算机识别的.class文件,但是.class文件是计算机识别的我们一般看不明白,因此需要反编译变成我们能读懂的源码,但是反编译后的......
  • OpenKruise :Kubernetes背后的托底
    本文分享自华为云社区《OpenKruise核心能力和工作原理》,作者:可以交个朋友。一、诞生背景Kubernetes自身提供的应用部署管理功能,无法满足大规模应用场景的需求,例如应用发布时的原地升级策略,流式扩容,缩容顺序控制等等。所以OpenKruise的出现弥补了Kubernetes在应用部署、升级......
  • Table 变身记:Element-Plus携手SortableJS打造可拖拽式体验
    使用element-plus的el-table组件创建出来的table。结合sortable.js实现行拖动排序。安装包npminstall-Dsortablejs使用官方table示例代码<template><el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label=&quo......
  • APPLICATION_FORM_URLENCODED_VALUE引发的no suitable HttpMessageConverter found fo
     轻松解决feign.codec.EncodeException:Couldnotwriterequest:nosuitableHttpMessageConverterfoundfor 问题:使用feignclient访问其他服务时,报错:feign.codec.EncodeException:Couldnotwriterequest:nosuitableHttpMessageConverterfoundforrequesttype......
  • Layui select实现赋值和主动触发选择时间,及radio实现可取消
    Layuiselect赋值,并主动触发选择事件//Layuiselect赋值,并主动触发选择事件//Input:selectId:ID选择器,selectFilter:lay-filter名称,value:需要的赋值,text:显示文本值functionsetSelect(selectId,selectFilter,value,text){//赋值$(selectId).find("option[va......
  • 他凌晨1:30给我开源的游戏加了UI|模拟龙生,挂机冒险
    一、前言新年就要到了,祝大家新的一年:......
  • no such file or directory .next/BUILD_ID
    报错内容%npmstart>[email protected]>nextstart▲Next.js14.1.0-Local:http://localhost:3000Error:ENOENT:nosuchfileordirectory,open'/Users/alan/github/pt-react/.next/BUILD_ID'atasyncopen(node:inter......