vxe-table使用popover示例
时间: 2024-02-02 15:10:16 浏览: 59
以下是一个使用vxe-table的popover示例:
```html
<template>
<div>
<vxe-table :data="tableData" show-header>
<vxe-table-column type="index" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="address" title="地址">
<template #cell="{ row }">
<vxe-popover trigger="hover" placement="top">
<template #content>
<div>
<p>省份:{{ row.province }}</p>
<p>城市:{{ row.city }}</p>
</div>
</template>
<span>{{ row.address }}</span>
</vxe-popover>
</template>
</vxe-table-column>
</vxe-table>
</div>
</template>
<script>
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市朝阳区', province: '北京', city: '北京市' },
{ name: '李四', age: 20, address: '上海市浦东新区', province: '上海', city: '上海市' },
{ name: '王五', age: 22, address: '广州市天河区', province: '广东', city: '广州市' },
]
}
},
mounted() {
VXETable.use(VXETablePluginMenus)
VXETable.init()
}
}
</script>
```
这个示例中,我们使用了vxe-table的popover组件来实现表格中地址列的弹出框效果。当鼠标悬停在地址单元格上时,会显示一个弹出框,里面包含了省份和城市信息。