为了在
el-
table表头中使用
el-
popover，您需要为每个
popover绑定一个独特的变量。以下是一个例子，展示了如何在
el-
table表头中使用
el-
popover：
```html
<template>
<
el-
table :data="
tableData" style="width: 100%">
<
el-
table-column prop="date" lab
el="日期" width="180">
<template slot="header">
<div>
日期
<
el-
popover
placement="bottom"
width="200"
trigger="hover"
v-mod
el="
popoverVisible1"
>
<p>这是一个日期选择器</p>
<
el-date-picker v-mod
el="date" type="date" placeholder="选择日期"></
el-date-picker>
</
el-
popover>
<
el-button
slot="reference"
icon="
el-icon-question"
size="mini"
@click="
popoverVisible1 = true"
></
el-button>
</div>
</template>
</
el-
table-column>
<
el-
table-column prop="name" lab
el="姓名" width="180">
<template slot="header">
<div>
姓名
<
el-
popover
placement="bottom"
width="200"
trigger="hover"
v-mod
el="
popoverVisible2"
>
<p>这是一个输入框</p>
<
el-input v-mod
el="name" placeholder="请输入姓名"></
el-input>
</
el-
popover>
<
el-button
slot="reference"
icon="
el-icon-question"
size="mini"
@click="
popoverVisible2 = true"
></
el-button>
</div>
</template>
</
el-
table-column>
</
el-
table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2022-01-01',
name: '张三'
},
{
date: '2022-01-02',
name: '李四'
},
{
date: '2022-01-03',
name: '王五'
}
],
popoverVisible1: false,
popoverVisible2: false,
date: '',
name: ''
};
}
};
</script>
```
在这个例子
中，我们为每个
el-
popover绑定了一个独特的变量(
popoverVisible1和
popoverVisible2)，这样每个
popover就可以正常渲染了。同时，我们还为每个
popover添
加了一个
el-button，当用户将鼠标悬停在这个按钮上时，
popover就会
显示出来。
扫一扫
3058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
