600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Ant Design Vue组件中的Select 选择器实现全选/全不选功能

Ant Design Vue组件中的Select 选择器实现全选/全不选功能

时间:2019-04-12 04:01:02

相关推荐

Ant Design Vue组件中的Select 选择器实现全选/全不选功能

效果

代码

<template><a-select:value="text"placeholder="请选择类型"style="width:100%"showArrowsmode="multiple"@change="onchange"><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 type="link" @click="selectAll">全选</a-button><a-button type="link" @click="clearAll">清空</a-button></div></div><a-select-option v-for="(item,index) in couponTypeOpts" :key="index" >{{ item.label }}</a-select-option></a-select></template><script>export default {name:"all-select",props: {dict:String},components:{VNodes: {functional: true,render: (h, ctx) => ctx.props.vnodes}},data() {return {text:[],couponTypeOpts:[],}},watch: {text(val) {this.$emit('input', val);},},created() {console.log(this.dict)this.getCouponType()},methods: {getCouponType(){this.$getDict(this.dict).then((list)=>{list = list.map((i)=>{return {label: i.dictLabel,value: i.dictValue}})this.couponTypeOpts = list;})},onchange(value){console.log(value)this.text=value},selectAll(){this.text=[]this.text=this.couponTypeOpts.map((item,index)=>{return Number(index)})console.log(this.text)},clearAll(){this.text=[]}},}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。