毕业后做了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>