VUE + ElementUI实现下拉多选

1、HTML

<el-col :span="24"><el-form-item label="学院" prop="college"><el-select v-model="dataForm.collegeList"multiplefilterablestyle="width: 100%;"placeholder="请选择学院"><el-option v-for="item in collegesDapartment":key="item.yxdm":label="item.yxmc":value="item.yxdm"></el-option></el-select></el-form-item>
</el-col>

2、JS

export default {data () {return {collegesDapartment: [],dataForm: {collegeList: [],college: ''}}},methods: {init () {this.dataForm.collegeList = []this.getCollegesDepartment()this.$nextTick(() => {this.$refs['dataForm'].resetFields()if (this.dataForm.id) {this.getInfo()}})},// 获取信息getInfo () {this.$http.get(`/ynauxy/ynayxytask/${this.dataForm.id}`).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}this.dataForm = {...this.dataForm,...res.data}this.dataForm.collegeList = this.dataForm.college.split(',')}).catch(() => {})},// 获取所有院系getCollegesDepartment () {this.$http.get('/ynauxy/ynayxyeducational/eduList').then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}this.collegesDapartment = res.data}).catch(() => {})},// 表单提交dataFormSubmitHandle: debounce(function () {this.dataForm.college = this.dataForm.collegeList.join(',')this.$refs['dataForm'].validate((valid) => {if (!valid) {return false}this.$http[!this.dataForm.id ? 'post' : 'put']('/ynauxy/ynayxytask/', this.dataForm).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}this.$message({message: this.$t('prompt.success'),type: 'success',duration: 500,onClose: () => {this.visible = falsethis.$emit('refreshDataList')}})}).catch(() => {})})}, 1000, { 'leading': true, 'trailing': false })}
}

VUE + ElementUI实现下拉多选相关推荐

vue+elementui实现下拉框及页面刷下
vue+elementui实现下拉框及页面刷下 1.应用场景:首页是一幅地图,地图中有相应的地址,点击相应的地址会跳转到相应的页面 ![在这里插入图片描述](https://img-blog.csdn ...
vue elementUI select下拉框设置默认值
关于element select框默认值赋值不成功问题,注意两点: v-model里面的数据和遍历出来value值数据类型不一样.!!!! (例:item.provinces类型是number,pro ...
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
vue中input多选_vue实现下拉多选vue实现多选下拉框
效果展示 image.png下拉组件 ∨ //下拉列表 {{item.Name}} data() { return { checkedData: [], //选中的数据 isShow: false, ...
html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
axure 下拉多选元件_Axure教程：下拉多选列表集合（多选下拉列表+单选下拉列表+分级下拉列表）...
原标题:Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表) 之前和大家分享了 <>.<>,很多同学私信我说很好使用,希望能够做一个多选下拉列表的教程 ...
Flutter：使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法.在第一种方法中,我们将从头开始构建多选.在第二种方法中,我们将使用第三方包快速完成工作 ...
el-select 结合 el-checkBox 实现下拉全选+多选功能；el-select下拉框全选功能；
原文链接 el-select选择框也有多选功能,但是没有全选.故需要改造一下,el-select 结合 el-checkBox 实现下拉全选+多选功能. 代码如下,可直接复制使用: <!--* ...
ajax实现下拉列表回显,layui实现下拉复选功能的例子(包括数据的回显与上传)
一.layui下拉复选实现的背景:实现一个管理员拥有多个权限二. 具体实现: //依赖资源 //页面显示角色: xm-select-search xm-select-skin="defa ...

VUE + ElementUI实现下拉多选

VUE + ElementUI实现下拉多选相关推荐

最新文章

热门文章