dev

<template>
    <div class="container">
        <!-- 表格部分 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
                <template #default="scope">
                    <span class="clickable-text" @click="handleClick(scope.row)">
                        {{ scope.row.name }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="address" label="地址" />
        </el-table>

        <!-- 弹出框部分 -->
        <el-drawer v-model="drawer" title="详细信息" direction="rtl" size="30%">
            <div v-if="selectedRow">
                <p>姓名：{{ selectedRow.name }}</p>
                <p>年龄：{{ selectedRow.age }}</p>
                <p>地址：{{ selectedRow.address }}</p>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 表格数据
const tableData = ref([
    {
        name: '张三',
        age: 18,
        address: '北京市朝阳区'
    },
    {
        name: '李四',
        age: 22,
        address: '上海市浦东新区'
    },
    {
        name: '王五',
        age: 25,
        address: '广州市天河区'
    }
])

// 控制抽屉显示
const drawer = ref(false)
// 选中的行数据
const selectedRow = ref(null)

// 点击处理函数
const handleClick = (row) => {
    selectedRow.value = row
    drawer.value = true
}
</script>

<style scoped>
.container {
    padding: 20px;
}

.clickable-text {
    color: #409EFF;
    /* Element Plus 的主题蓝色 */
    cursor: pointer;
}

.clickable-text:hover {
    text-decoration: underline;
}
</style>