列標題 Label 區域渲染使用的 Function
Function(h, { column, $index })
? <el-table-column?prop="sowStatus"?label="狀態"?align="center"?:render-header="renderHeader"?min-width="90">
?<template?slot-scope="scope">
<div?v-if="scope.row.sowStatus?==?null">-</div>
<div?v-else>
?<span?v-if="scope.row.sowBackFlag">已退回</span>
?<span?v-else>{{emnuList.get(scope.row.sowStatus)}}</span>
</div>
?</template>
</el-table-column>
renderHeader(createElement,?{?column,?$index?})?{
?let?proty?=?column.property
?//?console.log('該列的綁定數據',?column)
?//?console.log(proty)
?return?createElement(
'div',
{
?style:?'display:flex;justify-content:?center;'
},
[
?createElement(TableHeader,?{
style:?'cursor:?pointer;',
props:?{
?column:?column,
?options:?proty,
?tableQuery:?this.tableParams,
}
?})
]
?)
}
<template>
?<div?class="table-header">
<span?@click="clickIcon(column)">{{?column.label?}}<span?class="el-icon-sort"></span></span>
?</div>
</template>
<script>
export?default?{
?name:?'TableHeader',
?data()?{
return?{}
?},
?props:?{
type:?{
?type:?String,
?default:?''
},
defaultValue:?{
?type:?String,
?default:?''
},
options:?{
?type:?[Array,?String],
?default:?function()?{
return?[]
?}
},
defaultProps:?{
?type:?Object,
?default:?function()?{
return?{
?label:?'label',
?value:?'value'
}
?}
},
//傳遞過來的接口參數
tableQuery:?{
?type:?Object,
?default:?function()?{
return?{}
?}
},
cancelCb:?{
?type:?Function
},
//?父組件傳遞過來的自定義表列名字
column:?{
?type:?Object,
?default:?function()?{
return?{
?label:?'label',
?value:?'value'
}
?}
}
?},
?mounted()?{},
?methods:?{
clickIcon(column)?{
?//?在這裏處理排序的邏輯
}
?}
}
</script>
<style?scoped></style>
import?TableHeader?from?'./TableHeader'