转行两年后,又回归程序👨🏻‍💻

71 阅读1分钟

毕业后做了5年程序员,转行其他行业2年,现在又暂时打算转回来了,一把辛酸泪 还是要赚自己能力技术范围内的钱

拾代码

立马进入开发,技术栈是vue3+antDesignVue+ts 底子还是有的,代码会写,就是新框架的写法需要熟悉,边写边查,记录一下遇到的问题

ui框架 ant Design Vue

在使用[Ant Design] Vue框架的a-select组件时,需要自己使用插槽实现自定义

template模板部分

    <a-select
        v-model:value="data.detailObj.skillPositionValue"
        style="width: 100%"
        placeholder="请选择岗位"
        mode="multiple"
        @change="handleChange"
    >
        <a-select-option v-for="item in data.dictObj.jnzcygw" :value="item.optionValue">{{ item.optionName }}</a-select-option>
         <!-- 这里是关键代码-->
        <template #dropdownRender="{ menuNode: menu }"> 
            <v-nodes :vnodes="menu" />  <!-- 这里是关键代码-->
            <a-divider style="margin: 4px 0" />
            <div
                style="cursor: pointer"
                @mousedown="e => e.preventDefault()"
                @click="addItem"
            >
                <a-button type="link" @click="selectAll">全选</a-button>
                <a-button type="link" @click="clearAll">清空</a-button>
            </div>
        </template>
    </a-select>
</a-form-item>

script部分

<script setup lang="ts">
import { defineComponent } from 'vue'
const VNodes = defineComponent({  // 需要定义defineComponent才能用!!
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});
</script>