vue+elementui table表格点击单元格单元格改变背景色

<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;'
}
},

Vue 中,`el-table` 是 Element UI 提供的一个用于展示表格的数据组件。如果你想实现在点击某一行或某个单元格后,该单元格背景色变化,而其他单元格保持原样,你可以使用 `cell-style` 或 `row-class-name` 属性,并结合事件处理函数(如 `@click`)来实现动态样式。 这里是一个简单的例子: ```html <template> <el-table :data="tableData" @click="handleCellClick"> <el-table-column type="index"></el-table-column> <!-- 其他列... --> <el-table-column prop="colorColumn" cell-style="{ background-color: selectedColor ? '#ccc' : '' }"> <template slot-scope="scope"> <span @click="handleCellClick(scope.$index, scope.row.colorValue)">{{ scope.row.colorValue }}</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { colorColumn: 'value1', ... }, { colorColumn: 'value2', ... }, // 更多数据... ], selectedColor: false, selectedRow: null, }; }, methods: { handleCellClick(index, value) { this.selectedColor = !this.selectedColor; // 切换颜色状态 this.selectedRow = this.tableData[index]; // 保存选中的行 }, }, }; </script> ``` 在这个例子中: - `cell-style` 钩子接收一个对象作为参数,我们可以根据 `selectedColor` 变量决定当前单元格背景色。 - `handleCellClick` 方法会在点击单元格时被触发,将单元格颜色状态翻转,并记住当前选中的行。 - 当用户再次点击同一单元格时,颜色会恢复到原始状态。 如果你想要其他单元格保持不变,只需要在 `handleCellClick` 中不改变 `selectedColor` 的值即可。 相关问题-- 1. 如何在 `el-table` 中设置单元格点击事件? 2. `cell-style` 和 `row-class-name` 在这个场景下有什么区别? 3. 如何避免每次点击都影响所有单元格的样式?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值