2021-10-28

最新推荐文章于 2024-10-15 14:00:48 发布

LXYSYH2018

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量246

点赞数

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_40751083/article/details/121011261

版权

vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中使用`el-table`组件动态改变行颜色。关键在于设置`row-class-name`属性，结合自定义方法`tableRowClassName`判断行数据，当`commonState`为真时应用特定样式。同时展示了`el-table`的相关配置，包括列定义、事件监听等，以及对应的CSS样式实现。

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

el-table动态改变行颜色【vue】

1.<el-table>标签中加属性:row-class-name="tableRowClassName"

<el-table :key="tableKey" ref="table" v-loading="loading" :data="tableData.records" border fit
              :row-class-name="tableRowClassName"
              row-key="id" @filter-change="filterChange" @selection-change="onSelectChange" @sort-change="sortChange"
              @cell-click="cellClick">
      <el-table-column align="center" type="selection" width="40px" column-key="selectionId" :reserve-selection="true"/>
      <el-table-column label="id" align="center" prop="id" sortable="custom"/>
      <el-table-column label="常用语" align="center" prop="commonWords"/>
      <el-table-column label="创建日期" align="center" prop="createTime"/>
      <el-table-column label="更新日期" align="center" prop="updateTime"/>
      <el-table-column label="操作" column-key="operation" align="center" class-name="small-padding fixed-width"
                       fixed="right" width="150px">
        <template slot-scope="{row}">
          <i class="el-icon-edit table-operation" style="color: #2db7f5;" v-if="row.commonState==null" @click="editRow(row)"/>
          <i class="el-icon-delete table-operation" style="color: #f50;" v-if="row.commonState==null" @click="del(row)"/>
        </template>
      </el-table-column>
    </el-table>


2.  methods: {}中添加方法tableRowClassName

    tableRowClassName({row}) {
      if(row.commonState === true) {
        return 'common-row';
      }
    },
    
3. 添加css样式
	<style>
	.el-table .common-row {
	  background: pink!important;
	}
	</style>