获取 el-form-item label值的方法

可以通过以下两种方式获取el-form-item的label值：

1. 使用ref属性获取el-form-item组件的实例，然后通过实例的$props属性获取label值，例如：

<el-form-item label="用户名" ref="usernameFormItem">
  <el-input v-model="username"></el-input>
</el-form-item>

const label = this.$refs.usernameFormItem.$props.label;

2. 在el-form-item组件上绑定prop属性，并且使用表达式语法绑定label值，例如：

<el-form-item :label="'用户名'">
  <el-input v-model="username"></el-input>
</el-form-item>

const label = this.$options._componentTag.options.props.label.default;

需要注意的是，第二种方式获取label值是在组件的定义中获取的，如果组件的label值是动态绑定的，这种方式可能无法获取到正确的值。建议使用第一种方式获取label值。

相关问题

<el-form-item label="图书名称">{{ goods.name }}</el-form-item> <el-form-item label="图书编码"><span>{{ goods.code }}</span></el-form-item> <el-form-item label="图书描述">{{ goods.descpription }}</el-form-item> <el-form-item label="图书价格"><span style="color: red">{{ goods.price }}/{{ goods.unit }}</span></el-form-item> <el-form-item label="图书库存"><span>{{ goods.nums }}</span></el-form-item> <el-form-item label="出版日期"><span>{{ goods.date }}</span></el-form-item> <el-form-item label="出版社"><span>{{ goods.publisher }}</span></el-form-item> <el-form-item label="作者"><span>{{ goods.author }}</span></el-form-item> 解释一下

这是一个 Vue.js 的代码片段，它定义了一个表单，其中包含了一些描述图书属性的表单项。

- 第一个表单项是“图书名称”，它的值为 goods.name。
- 第二个表单项是“图书编码”，它的值为 goods.code。
- 第三个表单项是“图书描述”，它的值为 goods.descpription。
- 第四个表单项是“图书价格”，它的值为 goods.price 和 goods.unit，用红色字体显示。
- 第五个表单项是“图书库存”，它的值为 goods.nums。
- 第六个表单项是“出版日期”，它的值为 goods.date。
- 第七个表单项是“出版社”，它的值为 goods.publisher。
- 第八个表单项是“作者”，它的值为 goods.author。

这个表单可以用于展示某个图书的详细信息，并且允许用户对其中的某些属性进行编辑。

怎么获取 el-form-item 的label

可以通过以下两种方式获取 `el-form-item` 的 `label`：

1. 使用 `ref` 属性

在 `el-form-item` 上添加 `ref` 属性，并在需要获取 `label` 的地方通过 `$refs` 获取：

<template>
  <el-form-item label="用户名" ref="usernameFormItem">
    <el-input v-model="username"></el-input>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  mounted() {
    console.log(this.$refs.usernameFormItem.label)
  }
}
</script>

2. 使用 `$parent` 属性

在 `el-form-item` 内部使用 `$parent` 属性获取 `el-form` 组件实例，并通过实例的 `label-position` 属性和 `label-width` 属性计算出 `label` 的值：

<template>
  <el-form>
    <el-form-item label="用户名">
      <el-input v-model="username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="password"></el-input>
    </el-form-item>
    <el-button @click="getLabels">获取 label</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    getLabels() {
      const formItems = this.$el.querySelectorAll('.el-form-item')
      const labels = Array.from(formItems).map(item => {
        const form = item.$parent
        const labelPosition = form.labelPosition || 'right'
        const labelWidth = form.labelWidth || 'auto'
        const label = item.getAttribute('label')
        return labelPosition === 'top' ? label : label + ':'.repeat(labelWidth / 7)
      })
      console.log(labels)
    }
  }
}
</script>