Vue Element-UI Table点击某一行，将该行背景色改变高亮点击的行

冷不防 2023-05-29 05:01 19阅读 0赞

想要实现一个点击一行，改行的背景色改变，高亮，如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

###  1、先开启element的高亮选项 ###

<el-table
       :data="page_datas"
        border
        stripe
        highlight-current-row  # 开启element table 行高亮选项
        style="width: 100%">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="create_user.real_name" label="创建人"></el-table-column>
        <el-table-column prop="create_user.mobile" label="落箱电话" width="110" align="center"></el-table-column>
        <el-table-column prop="reservation_no" label="预约号" width="110"></el-table-column>
        <el-table-column prop="reservation_id" label="预约号条码" width="110"></el-table-column>
        <el-table-column prop="pier.pier_name" label="起始地"></el-table-column>
    </el-table>

### 2、设置全局的高亮样式 ###

这样就可以了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104102943703.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70