80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: fzq
|
||
* @Date: 2022-11-25 09:51:46
|
||
* @LastEditors: fzq
|
||
* @LastEditTime: 2023-02-09 10:17:22
|
||
-->
|
||
<template>
|
||
<!-- 数字代表多级表头最小列宽 -->
|
||
<!-- :width="opt.width || null" -->
|
||
<!-- :width="flexColumnWidth(opt.prop || null)" -->
|
||
<!-- header-align="center" align="center" -->
|
||
<!-- :min-width="opt.minWidth || null" -->
|
||
<el-table-column
|
||
:label="opt.label ? opt.label : opt.name"
|
||
:prop="opt.prop || null"
|
||
:min-width="[$route.fullPath == '/monitoring-realtimeQualityInspection' ? 170 : (opt.minWidth || null)]"
|
||
:fixed="opt.fixed || null"
|
||
:show-overflow-tooltip="opt.showOverflowTooltip || false"
|
||
filter-placement="top"
|
||
:align="opt.align || 'center'"
|
||
v-bind="opt.more"
|
||
>
|
||
<template v-if="opt.prop" slot-scope="scope">
|
||
<component v-if="opt.subcomponent" :is="opt.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head: opt }" @emit-data="handleSubEmitData" />
|
||
<!-- 直接展示数据或应用过滤器 -->
|
||
<span v-else>{{ scope.row[opt.prop] | commonFilter(opt.filter) }}</span>
|
||
</template>
|
||
<!-- 递归 -->
|
||
<template v-if="!opt.prop && opt.children">
|
||
<TableHead v-for="(subhead, index) in opt.children" :key="'subhead' + index" :opt="subhead" />
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'TableHead',
|
||
filters: {
|
||
commonFilter: (source, filterType = a => a) => {
|
||
return filterType(source)
|
||
}
|
||
},
|
||
props: {
|
||
opt: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
methods: {
|
||
// 自定义表头列宽
|
||
flexColumnWidth(str) {
|
||
let flexWidth = 0
|
||
for (const char of str) {
|
||
if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
|
||
// 如果是英文字符，为字符分配8个单位宽度
|
||
flexWidth += 8
|
||
} else if (char >= '\u4e00' && char <= '\u9fa5') {
|
||
// 如果是中文字符，为字符分配20个单位宽度
|
||
flexWidth += 20
|
||
} else {
|
||
// 其他种类字符，为字符分配5个单位宽度
|
||
flexWidth += 5
|
||
}
|
||
}
|
||
// if (flexWidth < 50) {
|
||
// // 设置最小宽度
|
||
// flexWidth = 50
|
||
// }
|
||
if (flexWidth > 250) {
|
||
// 设置最大宽度
|
||
flexWidth = 250
|
||
}
|
||
return flexWidth + 'px'
|
||
},
|
||
}
|
||
}
|
||
</script>
|