el-form-item label动态显示内容
时间: 2023-12-14 12:53:51 浏览: 404
要实现 el-form-item 的 label 动态显示内容,可以使用 Vue 的绑定语法,将 label 属性绑定到一个变量或计算属性上,当变量或计算属性的值改变时,label 的内容也会随之改变。以下是示例代码:
```html
<template>
<div>
<el-form :model="form" :rules="rules">
<el-form-item :label="label">{{ form.name }}</el-form-item>
</el-form>
<el-button type="primary" @click="changeLabel">改变 label 内容</el-button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: 'John'
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
label: '姓名'
}
},
methods: {
changeLabel() {
this.label = '名字';
}
}
}
</script>
```
上述代码中,el-form-item 的 label 属性被绑定到了 label 变量上,初始化时 label 的值为 '姓名',表单中的内容显示为 'John'。当点击按钮时,调用 changeLabel 方法,将 label 的值改为 '名字',label 的内容也会随之改变。
阅读全文