简单封装表格组件 myTable.vue
<template>
<div>
<el-table
ref="tableRef"
:data="data"
header-align="center"
align="center"
border
:max-height="maxHeight"
:height="tableHeight"
:header-cell-style="{ background: '#FAF9F8' }"
:highlight-current-row="highlightCurrentRow"
sortable
tooltip-effect="light"
@row-click="rowClick"
@row-dblclick="dblClick"
@select="handleSelect"
@select-all="handleSelect"
:row-class-name="getRow"
>
</el-table>
</div>
</template>
<script>
export default {
methods: {
getRow({ row }) {
let result = "";
this.$emit('getRow',row,(val) => {
result = val;
})
return result;
},
},
};
</script>
<style lang="less" scoped>
.el-table ::v-deep .warning-row {
background: #ecf5ff !important;
}
</style>
引入myTable组件
<template>
<div>
<myTable @getRow="tableRowClassName" :data="list"></myTable>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
};
},
methods: {
tableRowClassName(row, callback) {
//根据条件过滤显示高亮
if (row.code == 123) {
callback("warning-row");
} else {
callback("");
}
},
},
};
</script>