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

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
或者
let sales_name = this.$refs.itemSelect.selected.currentLabel
// 注意!!!!:一定要是在nextTick数据更新后才会有正确的值
this.$nextTick(() => {
    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) {}
    },

通过getCheckedNodes选中的数据有个弊端,就是通过输入框搜索获取到的数据然后选择的时候会无法获取到节点数据,通过getNodeByValue方法可以获取到搜索选择的数据,代码如下:

    handleCarModelSelect(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'
        ].panel.getNodeByValue(data)
        if (checkedNodes) {
          const pathLabels = checkedNodes.pathLabels
          if (pathLabels) {
            this.form.brand = pathLabels[0]
            if (pathLabels.length > 1) {
              this.form.series = pathLabels[1]
            }
            if (pathLabels.length > 2) {
              this.form.displacement = pathLabels[2]
            }
            if (pathLabels.length > 3) {
              this.form.year = pathLabels[3]
            }
          }
        }
      } catch (error) {}
    },
posted @ 2023-10-13 09:35  qqcc1388  阅读(2683)  评论(0编辑  收藏  举报