1、在表格上增加 :row-class-name=“tableRowClassName” 属性。
<el-table v-loading="dataListLoading" max-height="550" :data="dataList" border @selection-change="dataListSelectionChangeHandle" :row-class-name="tableRowClassName" style="width: 100%;" size="small">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="xzmc" label="乡镇级名称" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column prop="cmc" label="村级名称" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column prop="suyqrdm" label="所有权人代码" header-align="center" align="center" :show-tooltip-when-overflow="true" width="200"></el-table-column>
<el-table-column prop="suyqrmc" label="所有权人名称" header-align="center" align="center" :show-tooltip-when-overflow="true" width="250"></el-table-column>
<el-table-column prop="suyqxz" label="所有权性质" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120">
<template slot-scope="scope">
{{ $getDictLabel("ownership_type_ah", scope.row.suyqxz) }}
</template>
</el-table-column>
<el-table-column prop="dbrxm" label="代表人姓名" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column prop="dbrzjhm" label="代表人证件号码" header-align="center" align="center" :show-tooltip-when-overflow="true" width="150"></el-table-column>
<el-table-column prop="dbrlxdh" label="代表人电话" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column prop="dbrtxdz" label="代表人地址" header-align="center" align="center" :show-tooltip-when-overflow="true" width="150"></el-table-column>
<el-table-column prop="dbryzbm" label="邮政编码" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column prop="sfclncjtjjzz" label="是否成立集体经济组织" header-align="center" align="center" :show-tooltip-when-overflow="true" width="150">
<template slot-scope="scope">
{{ $getDictLabel("is_dictionaries", scope.row.sfclncjtjjzz) }}
</template>
</el-table-column>
<el-table-column prop="update_name" label="调查员" header-align="center" align="center" :show-tooltip-when-overflow="true" width="120"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="200">
<template slot-scope="scope">
<el-button v-if="$hasPermission('rhdc:zjdsuyqr:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id, 1)">查看</el-button>
<el-button v-if="$hasPermission('rhdc:zjdsuyqr:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id, 2)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('rhdc:zjdsuyqr:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('deleteBatch') }}</el-button>
</template>
</el-table-column>
</el-table>
2、在脚本中增加 tableRowClassName 方法:
methods: {
// 高亮显示
tableRowClassName ({ row, rowIndex }) {
if (rowIndex === 1) {
return 'warning-row'
} else if (rowIndex === 3) {
return 'success-row'
}
return ''
}
}
3、增加样式:
<style scoped>
/deep/.el-table .warning-row {
background: red;
}
/deep/.el-table .success-row {
background: green;
}
</style>
4、页面效果:
5、关键代码截图