【第012篇】vue+elementui表格高亮显示

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、关键代码截图