el-cascader级联二级选择图片

示例图：

// vue部分
 <el-cascader
              v-model="scope.row[item.prop]"
              :options="typeOptions"
              :show-all-levels="false"
              :props="{ value: 'dictValue', label: 'dictLabel', key: 'id', emitPath: false }"
              @expand-change="cascaderFocus"
              @focus="cascaderFocus"
            >
            // 使用template自定义类型为chart的 （必须是二级中的dictType为chart 不要一级，不然一级会进入）
            // 需要获取到.cascader-hover外层的span 因为element写死了高度 在js中操作
            // 添加聚焦和父级改变事件
              <template slot-scope="{ node, data }">
                <div v-if="data.dictType === 'chart'" style="display: flex; align-items: center">
                  <img class="cascader-hover" :src="data.remark" :title="data.dictLabel" />
                  <span style="padding-left: 10px">{{ data.dictLabel }}</span>
                </div>
              </template>
 </el-cascader>

// js部分

    // 级联图表显示图片 聚焦/切换都要有
    cascaderFocus() {
      this.$nextTick(() => {
        let dom = document.getElementsByClassName('cascader-hover');
       if (dom && dom.length > 0) {
          Array.from(dom).forEach(item => {
            if (item.offsetParent) {
              item.offsetParent ? (item.offsetParent.style.height = '100%') : null;
              item.offsetParent ? (item.offsetParent.style.lineHeight = '100%') : null;
            } else {
              // 第一次选择是图表会dom存在异步问题
              setTimeout(() => {
                item.offsetParent ? (item.offsetParent.style.height = '100%') : null;
                item.offsetParent ? (item.offsetParent.style.lineHeight = '100%') : null;
              }, 100);
            }
          });
        }
      });
    },

// css部分
.cascader-hover { width: 100px; height: 100px; }