图层树开发方法（待验证）下拉框选择图片（有bug）

WX

2023-07-21 bf48462e6ce0e0baa899c1c64c24c05290dc77fd

 src/views/layer/layerDetail.vue

@@ -26,13 +26,18 @@
          class="m-2"
          placeholder="Select"
          size="small"
          @change="changeSelection(stretchValue)"
          ref="select"
        >
          <el-option
            v-for="item in stretchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
          >
            <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
    </div>
@@ -52,26 +57,17 @@
const transparence = ref(0);
let layerName = ref("图层名称");
let layerState = ref(false);
let select = ref();
const stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
];
const emits = defineEmits(["detailClose"]);
@@ -83,6 +79,22 @@
  emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
const changeSelection = (scope) => {
  let brand = scope;
  for (let index in stretchOptions) {
    let aa = stretchOptions[index];
    let value = aa.value;
    if (brand === value) {
      console.log(select.value);
      select.value.$el.children[0].children[0].setAttribute(
        "style",
        "background:url(" +
          aa.url +
          ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
      );
    }
  }
};
</script>

<style lang="less" scoped>