如何在元素 ui 的 el-option 内格式化 v-for 中的值

Question

我需要格式化为 v-for 中标签 (item.value) 中的值的十进制值。

这是我的代码：

<el-form-item :label="label" :required="required" prop="Jan">
      <el-select v-model="Jan" clearable filterable placeholder="Selecione" :multiple="multiple" :disabled="disabled" :loading="loading" @change="onChange">
        <el-option
          v-for="item in orcindex"
          :key="item.id"
          :label="item.name + ' - ' + item.value + '%'"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

我已经有格式化的功能了：

从“@/utils/cells-format”导入 {numberFormat}

 methods: {
    cellValueRenderer(cellValue) {
      var value = numberFormat(cellValue, 'decimal')
      return value
    }
 }

那么如何使用这个函数来格式化v-for中的值呢？（我是 vuejs 的新手）

Answer 1

您应该使用插槽来获得自定义标签

<el-form-item :label="label" :required="required" prop="Jan">
      <el-select v-model="Jan" clearable filterable placeholder="Selecione" :multiple="multiple" :disabled="disabled" :loading="loading" @change="onChange">
        <el-option
          v-for="item in orcindex"
          :key="item.id"
          :value="item.id"
        >
        <span>{{ cellValueRenderer(item.label) }}</span>
        </el-option>
      </el-select>
    </el-form-item>

Answer 2

可以直接使用函数

<el-option
      v-for="item in orcindex"
      :key="item.id"
      :label="item.name + ' - ' + cellValueRenderer(item.value) + '%'"
      :value="item.id"
    />

如何在元素 ui 的 el-option 内格式化 v-for 中的值

How can I formatt a value in v-for inside a el-option in element ui

javascript

vue.js

element-ui