el-table 表头首次渲染抖动
时间: 2023-06-03 12:03:06 浏览: 69
对于您的这个问题,我可以提供一些解决方案。您可以尝试调整 el-table 表头的样式,例如设置固定高度、设置固定宽度、调整列的宽度等。此外,您也可以使用一些第三方库来解决这个问题,例如 vue-virtual-scroll-list、vue-tiny-virtual-list 等。希望能够帮助到您。
相关问题
el-table多级表头渲染
可以使用 el-table 的 column 属性来实现多级表头渲染。具体步骤如下:
1. 在 el-table-column 中设置 prop 属性,用于指定该列对应数据源中的字段名。
2. 在 el-table-column 中设置 label 属性,用于指定该列的表头名称。
3. 在 el-table-column 中设置 children 属性,用于指定该列下的子列。
4. 在子列中重复以上步骤,直到达到所需的表头层级。
示例代码如下:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="联系方式">
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
</el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份"></el-table-column>
<el-table-column prop="city" label="城市"></el-table-column>
<el-table-column prop="address" label="详细地址"></el-table-column>
</el-table-column>
</el-table>
```
el-table 表头使用el-popover
为了在el-table表头中使用el-popover,您需要为每个popover绑定一个独特的变量。以下是一个例子,展示了如何在el-table表头中使用el-popover:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
<template slot="header">
<div>
日期
<el-popover
placement="bottom"
width="200"
trigger="hover"
v-model="popoverVisible1"
>
<p>这是一个日期选择器</p>
<el-date-picker v-model="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" label="姓名" width="180">
<template slot="header">
<div>
姓名
<el-popover
placement="bottom"
width="200"
trigger="hover"
v-model="popoverVisible2"
>
<p>这是一个输入框</p>
<el-input v-model="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就会显示出来。