el-table 点击单元格修改该单元格颜色

el-table单元格点击样式修改

最新推荐文章于 2024-05-21 14:16:49 发布

原创最新推荐文章于 2024-05-21 14:16:49 发布 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

项目中使用el-table，需求为点击单元格时，修改该单元格边框和字体颜色，涉及JavaScript、Vue.js和ElementUI相关技术。

在项目中使用el-table要求：点击单元格，该单元格边框和字体颜色修改。

<el-table :data="AccountInfo" :border="true" :header-cell-style="{ background: `${headerColor}`, }" :cell-style="cellStyle"  :cell-class-name="tableCellClassName" @cell-click="cellClick">
</el-table>

  data() {
        return {
            AccountInfo: [ ],
            headerColor: 'linear-gradient(180deg, rgba(17, 27, 43, 0.8) -106.45%, rgba(41, 48, 66, 0.8) 161.19%)',
            clickedRow: '', // 点击的单元格行号
            clickedColumn: '', // 点击的单元格列名
        }
    },

 methods: {
        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            //注意这里是解构
            //利用单元格的 className 的回调方法，给行列索引赋值
            row.index = rowIndex;
            column.index = columnIndex;
        },
        cellClick(row, column, cell, event) {
            console.log(row.index);
            console.log(column.index);
            this.clickedRow = row.index
            this.clickedColumn = column.index
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (row.index === this.clickedRow && column.index === this.clickedColumn) {
                return 'border:1px solid #2C89E5;color:#2C89E5'
            }else if(columnIndex === 0){
                return 'background:linear-gradient(180deg, rgba(17, 27, 43, 0.8) -106.45%, rgba(41, 48, 66, 0.8) 161.19%);color: #B3C0C9;'
            } else {
                return ''
            }
        }
    },

在这里插入图片描述