看下效果

直接上代码
<template>
<lay-table :default-toolbar="true" :columns="columns5" :data-source="dataSource5">
<template #title="{column}">
<span class="text-center">{{column.title}}</span>
<lay-tooltip content="我是这个地址的注释" position="top">
<lay-icon type="layui-icon-tips" size="15px" style="cursor: pointer;"></lay-icon>
</lay-tooltip>
</template>
</lay-table>
</template>
<style>
span:has(.text-center) {
width: 100%;
display: block;
text-align: center;
}
</style>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns5 = [
{
title: "编号",
width: "120px",
key: "id"
},
{
title: "名称",
width: "100px",
key: "name"
},
{
title: "性别",
width: "100px",
key: "sex"
},
{
title: "地址",
titleSlot: "title",
children: [
{ title: "省", key: "prov", width: "100px" },
{ title: "市", key: "city", width: "100px" },
{ title: "区", key: "area", width: "100px" },
]
},
{
title: "签名",
width: "240px",
key: "remark"
},
]
const dataSource5 = [
{ id: "10001", name: "夏娜1", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10002", name: "夏娜2", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10003", name: "夏娜3", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10004", name: "夏娜4", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10005", name: "夏娜5", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10006", name: "夏娜6", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10007", name: "夏娜7", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
{ id: "10008", name: "夏娜8", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' }
]
return {
columns5,
dataSource5,
}
}
}
</script>