526互联

vue el-select/el-cascader获取选中的对象label值

发布时间 2023-10-13 09:35:58作者: qqcc1388

1.el-select获取选中对象label值

  <el-form-item label="车辆配置" prop="sales_name">
    <el-select
      v-if="!showSaleNameInput"
      v-model="form.sales_name"
      clearable
      ref="itemSelect"
      size="mini"
      class="form-item-width"
    >
      <el-option
        v-for="(item, index) in sales_name_list"
        :key="index"
        :label="item.sales_name"
        :value="item.level_id"
      ></el-option>
    </el-select>
  </el-form-item>

获取正常情况下我们通过el-select获取到的值是value对应的code码，如果需要获取label值可以听过下面方式获取

let sales_name = this.$refs.itemSelect.selectedLabel

2.1.el-cascader获取选中对象label值

          <el-form-item
            label="品牌/车系/排量/年款"
            prop="carmodel"
            label-width="120"
            required
          >
            <carmodel-cascader
              style="width: 240px;"
              ref="cascader"
              v-model="form.carmodel"
              placeholder="请选择"
              clearable
              size="mini"
              :level="4"
              @change="handleCarmodelChange"
            ></carmodel-cascader>
          </el-form-item>

听过v-model获取到值的是对应的code码值，如果需要获取label值可以这样获取

    handleCarmodelChange(data) {
      this.form.carmodel = data
      this.form.brand = null
      this.form.series = null
      this.form.displacement = null
      this.form.year = null
      try {
        const checkedNodes = this.$refs['cascader'].$refs[
          'cascader'
        ].getCheckedNodes()
        if (checkedNodes && checkedNodes[0]) {
          const pathLabels = checkedNodes[0].pathLabels
          if (pathLabels) {
            this.form.brand = pathLabels[0]
            this.form.series = pathLabels[1]
            this.form.displacement = pathLabels[2]
            this.form.year = pathLabels[3]
          }
        }
      } catch (error) {}
    },