二次封装组件调用row-class-name方法
cdt-table/index.vue
<el-table
:size="size"
ref="tableRef"
:data="tableData"
:empty-text="emptyText"
:max-height="maxHeight"
style="width: 100%"
class="tableData"
tooltip-effect="dark"
@row-click="handleRow"
@selection-change="handleSelectChange"
@sort-change="handleSortChange"
:show-summary="showSummary"
:summary-method="getTotal"
@cell-click="handleCell"
:row-class-name="rowClassName"
:row-key="rowKey"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-if="displayListRefresh"
:stripe="stripe"
highlight-current-row
>
</el-table>
methods: {
// 根据返回的数据满足过滤条件行高亮显示
rowClassName:function({ row, rowIndex }) {
let data = ''
this.$emit('row-class-name', {
row: row,
rowIndex: rowIndex
},val=>{
data = val
})
return data //属性名必须返回一个string
},
.el-table {
.danger-row {
background-color: red;
}
}
DetailDialog.vue
引用该方法的子组件中进行调用
<div class="contentTable">
<cdt-table
:tableData="defaultData.jtsgDetail"
:columns="jtsgColumns"
:pagination="false"
@row-class-name="tableRowClassName"
>
</cdt-table>
// 表格行内容
tableRowClassName(obj,callback) {
if (obj.row.flag && obj.row.flag === '2') {
callback('danger-row')
// return 'danger-row'
}
else {
callback('')
// return ''
}
},