<template>
    <div class="">
        <el-popover placement="left" trigger="manual" :width="500" :teleported="true"
            v-model:visible="visibles">
            <template #reference>
                <el-button @click="togglePopover">查看</el-button>
            </template>
            <el-table :data="gridData" border max-height="700">
                <el-table-column property="text" label="关联项目" />
            </el-table>
        </el-popover>
    </div>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus'
const props = defineProps({
    rows:{
        type:Object,
        default: () => {},
    }
})

const gridData = ref([])

const visibles = ref(false)
const togglePopover = (data:any)=>{
    let project = props.rows.T_project
    if(project){
        const splitData = project.split('|')
        gridData.value = splitData.map((item:any)=> {return {text:item}})
        visibles.value = true
    }else{
        ElMessage.info('没有关联项目')
    }
   
}
</script>
<style lang="scss">
/* @import url(); 引入css类 */
</style>