点击时变色 再点去色 点其他的其他的变色 本身去色

//$(obj).parent().parent().css('border','2px solid red');
if($(obj).parent().parent().attr("id")=="border_red"){

$(obj).parent().parent().removeAttr('id');
}else {
$(obj).parent().parent().attr("id","border_red");

}


$(".item").not($(obj).parent().parent()).removeAttr('id');


#border_red{border: 2px solid red}

在 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、付费专栏及课程。

余额充值