1.创建组件文件
import { withInstall } from '@/utils/tool'
import FastTableProjectColumn from './src/fast-table-project-column.vue'export default withInstall(FastTableProjectColumn)
// 全局组件安装
export const withInstall = <T>(component: T, alias?: string) => {const comp = component as anycomp.install = (app: App) => {app.component(comp.name || comp.displayName, component)if (alias) {app.config.globalProperties[alias] = component}}return component as T & Plugin
}
<template><el-table-column:prop="prop":label="label":header-align="headerAlign":align="align":width="width":min-width="minWidth":class-name="className"><template #default="scope">{{ getValByProjectId(store.appStore.projectList, scope.row[props.prop]) }}</template></el-table-column>
</template><script setup lang="ts" name="FastTableProjectColumn">import store from '@/store'
import { getValByProjectId } from '@/utils/tool'const props = defineProps({prop: {type: String,required: true},label: {type: String,required: true},headerAlign: {type: String,required: false,default: () => 'center'},align: {type: String,required: false,default: () => 'center'},width: {type: String,required: false,default: () => ''},minWidth: {type: String,required: false,default: () => ''},className: {type: String,required: false,default: () => ''}
})
</script>
// 获取字典Label
export const getDictLabel = (dictList: any[], dictType: string, dictValue: string) => {const type = dictList.find((element: any) => element.dictType === dictType)if (type) {const val = type.dataList.find((element: any) => element.dictValue === dictValue + '')if (val) {return val.dictLabel} else {return dictValue}} else {return dictValue}
}
2.注册全局组件
import FastTableColumn from '@/components/fast-table-column'
app.use(FastTableColumn)