扩展菜单 #
使用 dropdownRender
对下拉菜单进行自由扩展。
<template>
<a-select
label-in-value
mode="multiple"
placeholder="请选择稽查项目"
v-model="inspectProjectArray"
:disabled="detailDisabled"
@change="handleChange"
>
<a-select-option
v-for="item in inspectProjectList"
:key="item.code"
:value="item.code"
>{{item.name}}</a-select-option>
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0;" />
<div style="padding: 4px 8px; cursor: pointer;" @mousedown="e => e.preventDefault()">
<a-button :size="size" @click="selectAll">全口径选择</a-button>
</div>
</div>
</a-select>
</template>
<script>
export default {
name: "InspectProjectSelect", //稽查项目 下拉列表
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
props: {
inspectProject_code: {
type: Array,
},
detailDisabled: {
type: Boolean,
},
},
data() {
return {
inspectProjectList: [
{ code: "gyzc", name: "国有资产稽查" },
{ code: "zfcg", name: "政府采购稽查" },
{ code: "cwhs", name: "财务核算稽查" },
{ code: "jjzr", name: "经济责任稽查" },
{ code: "jjxy", name: "经济效益稽查" },
{ code: "zyzf", name: "转移支付稽查" },
{ code: "tzgcjs", name: "投资/工程建设稽查" },
{ code: "nkjd", name: "内控监督稽查" },
],
inspectProjectArray: [],
num: true,
size: "small",
};
},
watch: {
inspectProject_code(newValue, oldValue) {
//console.log("监听inspectProject_code", newValue);
this.inspectProjectArray = []; // 先清空
newValue.forEach((element) => {
this.inspectProjectArray.push({
// 值变一次就追加
key: element,
});
});
},
},
methods: {
handleChange(value) {
//console.log(value);
this.$emit("inspectProject", value);
},
// 全选 -- 把数据源赋给select绑定的值
selectAll() {
if (this.num) {
this.inspectProjectList.forEach((item) => {
this.inspectProjectArray.push({
// 值变一次就追加
key: item.code,
label: item.name,
});
});
this.$emit("inspectProject", this.inspectProjectArray);
this.num = false;
} else {
this.num = true;
this.inspectProjectArray = []; // 先清空
this.$emit("inspectProject", this.inspectProjectArray);
}
},
},
created() {
this.inspectProject_code.forEach((element) => {
this.inspectProjectArray.push({
// 值变一次就追加
key: element,
});
});
},
};
</script>