element ui el-table点击单元格变色

本文介绍了如何使用Element UI的表格组件实现单元格点击事件(`cell-click`),通过`cell-style`属性根据预设条件动态改变单元格背景色。通过`clickedRow`和`clickedColumn`变量跟踪用户的点击行为,以便于定制单元格样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<el-table

        ref="multipleTable"

        border

        :data="mainInfo"

        @cell-click='changecolor'    <!--这个是点击事件-->

        :cell-style='cellStyle'        <!--这个是单元格的样式-->

>

</el-table>

data() {

        return {

                clickedRow: '', // 点击的单元格行号

                clickedColumn: '', // 点击的单元格列名

        };

},

methods: {

    // 获取所点击的单元格

    changecolor(row, column, cell, event) {

              this.clickedRow = row.dtuSort  // 取个唯一值用作判定行

              this.clickedColumn = column.property

    },

    // 控制单元格样式

    cellStyle({row, column, rowIndex, columnIndex}) {

              if (row.dtuSort === this.clickedRow && column.property === this.clickedColumn) {

                        return {

                                  background: 'lightgreen'

                        }

              } else {

                        return {

                                  background: 'white'

                        }

              }

            },

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值