el-select用作分页选择每页显示多少条时, 全部显示选项的el-option在刷新页面,el-table数据未渲染完成时,会显示成value,刷新页面,数据渲染完毕后,又会显示成label,这个问题怎么解决?代码怎么写
时间: 2024-02-17 07:02:51 浏览: 60
element-ui 关于获取select 的label值方法
5星 · 资源好评率100%
这个问题可以通过使用 `v-if` 和 `v-else` 指令来解决。在 el-select 中,我们可以使用 `v-if` 来判断当前 el-option 是否应该显示成 `value` 或 `label`。
具体来说,我们可以在 el-option 中使用一个变量来存储当前 el-option 是否应该显示成 `value` 或 `label`。然后,在 el-select 中,我们可以使用 `v-if` 和 `v-else` 来根据这个变量的值来确定 el-option 的显示方式。
以下是示例代码:
```
<template>
<div>
<el-select v-model="pageSize" placeholder="请选择每页显示条数">
<el-option
v-if="showValue"
v-for="size in pageSizes"
:key="size"
:label="size"
:value="size"
></el-option>
<el-option
v-else
v-for="size in pageSizes"
:key="size"
:label="size"
:value="size"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
pageSizes: [10, 20, 30, 40],
pageSize: 10,
showValue: false,
};
},
mounted() {
this.showValue = true;
},
};
</script>
```
在这个示例代码中,我们在 el-option 中使用了一个变量 `showValue` 来存储当前 el-option 是否应该显示成 `value` 或 `label`。在 el-select 中,我们使用了 `v-if` 和 `v-else` 来根据 `showValue` 的值来确定 el-option 的显示方式。在 mounted 钩子函数中,我们将 `showValue` 的值设置为 true,这样在页面刷新时,el-select 中的 el-option 会先显示成 `value`,等数据渲染完毕后,再显示成 `label`。
阅读全文