antd-vue中下拉多选组件中的全选和清空
*1:对antd -vue 中下拉多选中全选,清空操作及代码*html部分:<a-form-item label="适用楼宇" :labelCol="labelCol" :wrapperCol="wrapperCol"><a-selectv-decorator="['buildingsList', { rules: [{ required: true, message: '请选择
·
*1:对antd -vue 中下拉多选中全选,清空操作及代码
*
html部分:
<a-form-item label="适用楼宇" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
v-decorator="['buildingsList', { rules: [{ required: true, message: '请选择适用楼宇!' }] }]"
@change="handleChange2"
mode="multiple"
>
//全选,清空
<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 LYlist" :key="index" :value="item.buildingId">
{{ item.buildingName }}
</a-select-option>
</a-select>
js部分:
// 楼宇全选和清空
this.LYlist就是数据源
buildingId是后需要的数据
this.buildingsType是后端和我要求的,全选是1,清空是0.
selectAll() {
this.buildingsType = 1
const arr = []
this.LYlist.forEach((item) => {
arr.push(item.buildingId)
})
this.form.setFieldsValue({
buildingsList: arr,
})
},
clearAll() {
this.buildingsType = 0
this.form.setFieldsValue({
buildingsList: [],
})
},
handleChange2(val) {
//刷新一下组件的方法,要是你门碰见明明修改了组件的值,
//但是显示没有变化,试试组件强制刷新这个方法
this.$forceUpdate()
},
注: 使用的 v-decorator 并不是v-modal。
上图:
更多推荐
已为社区贡献1条内容
所有评论(0)