记录el-table勾选改变选中行样式的方法

接口还没写完你先干别的

已于 2022-09-22 15:54:40 修改

阅读量876

点赞数 1

文章标签： javascript vue.js 前端

于 2022-09-22 15:00:33 首次发布

本文链接：https://blog.csdn.net/Women_9/article/details/126977788

版权

本文介绍了如何在Vue.js中利用el-table组件，通过监听`@selection-change`事件和`:row-style`属性，实现在复选框选中时改变表格行样式的功能，提供了一个示例代码供参考。

摘要由CSDN通过智能技术生成

选中复选框表格变色

方法

@selection-change=“selected” //复选框被选中的触发事件
:row-style=“isRed” //行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。

示例代码

// An highlighted block
<template>
  <div id="">
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-style="isRed"
      @selection-change="selected"
    >

      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="date" label=<