美文网首页
Vue 获取 label值, 多级

Vue 获取 label值, 多级

作者: 赵优秀 | 来源:发表于2024-10-23 13:57 被阅读0次

slelect 控件添加change事件

<el-select
                  filterable
                  v-model="ruleForm.nodeSigner"
                  :placeholder="$t('phrase.Pleaseselect')"
                  maxlength="18"
                  class="w240"
                  @change="onSelectChange"
                >
                  <el-option
                    v-for="item in formItems"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                    :title="item.dictName"
                  ></el-option>
                </el-select>

添加函数获取label值

//获取label
    onSelectChange(){
        const option = this.formItems.find(option => option.dictCode === this.ruleForm.nodeSigner);
        this.ruleForm.nodeSignerName = option ? option.dictName : '';
    },

多级 el-cascader

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      :props="{ checkStrictly: true }"
    ></el-cascader>
    <p>Selected Labels: {{ selectedLabels }}</p>
  </div>
</template>

JavaScript 部分

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                { value: 'yizhi', label: '一致' },
                { value: 'fankui', label: '反馈' }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                { value: 'cexiangdaohang', label: '侧向导航' },
                { value: 'dingbudaohang', label: '顶部导航' }
              ]
            }
          ]
        }
      ],
      selectedOptions: [],
      selectedLabels: []
    };
  },
  methods: {
    handleChange(value) {
      this.selectedLabels = this.getLabelsByValues(this.options, value);
    },
    getLabelsByValues(options, values) {
      let labels = [];
      const findLabels = (opts, vals) => {
        for (let i = 0; i < opts.length; i++) {
          if (vals[0] === opts[i].value) {
            labels.push(opts[i].label);
            if (vals.length > 1) {
              findLabels(opts[i].children, vals.slice(1));
            }
            break;
          }
        }
      };
      findLabels(options, values);
      return labels;
    }
  }
};
</script>

相关文章

网友评论

      本文标题:Vue 获取 label值, 多级

      本文链接:https://www.haomeiwen.com/subject/teyddjtx.html