Vue 树结构,下拉选 展示

选择子节点读取他的父节点名字 e.parent.data.value;

 <el-tree
  v-show="showCityList"
  :data="otherParam.cityList"
  v-model="param.citys"
  :props="defaultProps"
  :filter-node-method="filterNode"
  :highlight-current="true"
  ref="tree"
  accordion
  @node-click="handleNodeClick"
  class="treeSelect"
></el-tree>

 handleNodeClick(data, e) {
      if (this.otherParam.currUserRoleMkType == "02") {
        if (data.children) {
          this.param.city = data.value;
          this.param.region = "";
        } else {
          if (data.label == "全部") {
            this.param.region = "";
            this.param.city = this.cityText;
          } else {
            this.param.region = data.value;
            this.param.city = this.cityText;
          }
        }
      } else if (this.otherParam.currUserRoleMkType == "01") {
        if (data.children) {
          this.param.city = data.value;
          this.param.region = "";
        } else {
          if (data.label == "全部") {
            this.param.region = "";
            this.param.city = "";
          } else {
            this.param.region = data.value;
            this.param.city = e.parent.data.value;
          }
        }
      }
      this.filterText = data.label;
      this.handleClick();
      this.query();
    },

下拉选展示修改，溢出隐藏，鼠标移入展示全部

<el-form-item label="选择理由/原则:" prop="reason">
    <el-select
      v-model="reasonValue"
      placeholder="请选择"
      style="width:100%"
    >
      <el-option
        v-for="item in optionsList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <el-tooltip placement="top">
          <div slot="content">
            <span>{{ item.label }}</span>
          </div>
          <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
      </el-option>
    </el-select>

data(){
 return {
    
      optionsList: [
        {
          value:
            "设区市、县（市、区）节能主管部门已明确分解下达重点行业企业能耗总量控制和节能目标任务的，应以能耗总量控制目标核定企业年度基准能耗，并符合节能审查批复规定要求",
          label:
            "设区市、县（市、区）节能主管部门已明确分解下达重点行业企业能耗总量控制和节能目标任务的，应以能耗总量控制目标核定企业年度基准能耗，并符合节能审查批复规定要求",
        },
        {
          value:
            "重点行业企业（项目）符合节能审查批复规定要求的，应以节能验收或节能审查批复明确的能耗总量作为其年度基准能耗",
          label:
            "重点行业企业（项目）符合节能审查批复规定要求的，应以节能验收或节能审查批复明确的能耗总量作为其年度基准能耗",
        },
        {
          value:
            "企业分期实施的项目，可按当期投产的核定产能和国家或我省公布的单位产品能源消耗限额准入值核算。对于同时具有国家或省级能耗限额标准的，从严执行",
          label:
            "企业分期实施的项目，可按当期投产的核定产能和国家或我省公布的单位产品能源消耗限额准入值核算。对于同时具有国家或省级能耗限额标准的，从严执行",
        },
        {
          value:
            "在节能审查制度实施前已建成投产且不属于国家产能限制要求的企业（项目），可按近三年实际用能的平均值核定为其年度基准能耗",
          label:
            "在节能审查制度实施前已建成投产且不属于国家产能限制要求的企业（项目），可按近三年实际用能的平均值核定为其年度基准能耗",
        },
        {
          value:
            "对含有多种行业产能的高耗能企业，应对其主导产品按照前四种情形的要求确定其年度基准能耗",
          label:
            "对含有多种行业产能的高耗能企业，应对其主导产品按照前四种情形的要求确定其年度基准能耗",
        },
      ],
    
    };
}

.treeSelect {
  position: absolute;
  left: 0;
  top: 53px;
  z-index: 99;
  width: 100%;
  max-height: 350px;
  overflow: auto;
  -ms-overflow: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.el-select-dropdown__item {
  max-width: 670px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}