最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了,用的时候只需要把源码拿出来修改修改,也就成了。
这里记录一下开发过程中遇到的一些功能。
资料相关
vue-element-admin
推荐指数:star:55k
Github 地址:https://github.com/PanJiaChen/vue-element-admin
Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard
今天记录一个select下拉框单选或者多选项,支持删除的功能
其实很简单的,需要添加一个属性
#####为el-select设置multiple属性即可启用多选
首先,看文档:
https://element.eleme.cn/#/zh-CN/component/select
饿了么这个框架的文档给的十分的全面,
组件是非常的丰富的
export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value1: [], value2: [] } } }
实际应用的demo,参考代码index.vue
确定
//调用接口 import { saveSubject } from "@/api/content"; export default { data() { return { gradeSelect: "", tabMapOptions: [ { label: "幼儿园", key: "kinderGarten" }, { label: "一年级", key: "firstGrade" }, { label: "二年级", key: "twoGrade" }, { label: "三年级", key: "threeGrade" }, { label: "四年级", key: "fourGrade" }, { label: "五年级", key: "fiveGrade" }, { label: "六年级", key: "sixGrade" }, ], nextProjectForm: { questionContent: "", correctAnswer: "", otherAnswer1: "", otherAnswer2: "", otherAnswer3: "", userGrades: [], questionCategory: "", }, }; }, methods: { //添加增加题目 async createData() { let form = null; form = this.nextProjectForm; const params = form; const res = await saveSubject(params); console.log(res); if (res.code === "0000") { this.$message({ type: "info", message: "保存成功", }); return; } this.$message({ type: "error", message: "保存失败", }); }, }, };.tab-container { margin: 30px; }
api
import request from '@/utils/request' //保存题目分类接口 export async function saveSubjectCategory(data) { const res = await request({ url: '/question/saveQuestionCategory', method: 'post', data }) return res }
当select下拉框选择其中一个数据的时候,传到后端的参数
当select下拉框选择其中多个数据的时候,传到后端的参数