<el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
先在data中定义options变量为数组，在vue的created生命周期中调用接口获取接口返回值之后，将拿到的数据赋值给options即可
3条回答
-
采纳
点赞 1 评论 复制链接分享
-
采纳
调用接口，返回的数据拼凑到options里面就行了，官网都有级联选择器的实例
点赞 1 评论 复制链接分享 -
采纳
//级联格式是这样,比如 //河北省-石家庄市-赵县 //得到的value是这样的 //[1000,1010,1011] //所以回显的时候，你也一定要用这种数组的格式，将各级的value组成数组 :v-model="data" data=[1000,1010,1011]点赞 评论 复制链接分享
提交
相关推荐
- 回答 3 已采纳 后端给了我一个接口,我需要把数据渲染到级联选择器上,用的是vue+element框架,求大佬指明!!感激不尽
- 回答 1 已采纳 如果有这么一个级联选择器，为什么我el-cascader写完会将年级和班级的值都放在一个数组内然后从grade传上去，class则什么都没有传过去，怎么能把这俩分开？ data() { return { submitForm: { grade: '', class: '' }, classData: [{ value: '一年级', label: '一年级', children: [{ value: '一班', label: '一班' }, { value: '二班', label: '二班' }] }]
- 回答 3 已采纳 在自学vue过程中，使用elemet-ui布局进行时，编写商品分类参数中商品分类区域时，按照视频将<span>选择商品分类：</span>与<el-cascader>包裹在同一个<el-col></el-col>中没有并排显示，而是上下显示，目前是通过分别包裹<el-col></el-col>中设置:span显示，为什么会出现这个问题呢？是不是element-ui版本发生变化所造成的呢？还望知道的解答下…… 另外，大家如果有什么讲的比较详细的博客或文章，也可以推给我~十分感谢~ <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item> <el-breadcrumb-item>参数列表</el-breadcrumb-item> </el-breadcrumb> <el-card> <!-- 警告区域 --> <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert> <!-- 选择商品分类区域 --> <el-row class="cat_opt"> <el-col> <span>选择商品分类：</span> <!-- 商品分类的级联选择框 --> <el-cascader v-model="selectedCateKeys" :options="cateList" :props="cateProps" @change="handleChange" ></el-cascader> </el-col> </el-row> <el-tabs v-model="activeName" @tab-click="handleTabsClick"> <el-tab-pane label="动态参数" name="many"> <el-button type="primary" size="mini" :disabled="isBtnDisabled " @click="addDialogVisible=true" >添加参数</el-button> <el-table :data="manyTableData" border stripe> <el-table-column type="expand"> <template slot-scope="scope"> <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i,scope.row)">{<!-- -->{item}}</el-tag> <!-- 输入Tag文本框 --> <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)" ></el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button> </template> </el-table-column> <el-table-column type="index"></el-table-column> <el-table-column label="参数名称" prop="attr_name"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)" size="mini" >编辑</el-button> <el-button type="danger" icon="el-icon-search" size="mini" @click="removeParams(scope.row.attr_id)" >删除</el-button> </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="静态属性" name="only"> <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true" >添加属性</el-button> <el-table :data="onlyTableData" border stripe> <el-table-column type="expand"> <template slot-scope="scope"> <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i,scope.row)">{<!-- -->{item}}</el-tag> <!-- 输入Tag文本框 --> <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)" ></el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button> </template> </el-table-column> <el-table-column type="index"></el-table-column> <el-table-column label="属性名称" prop="attr_name"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.attr_id)" >编辑</el-button> <el-button type="danger" icon="el-icon-search" size="mini" @click="removeParams(scope.row.attr_id)" >删除</el-button> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs> </el-card> <el-dialog :title=" '添加' + getTitleText" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed" > <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="100px"> <el-form-item :label="getTitleText" prop="attr_name"> <el-input v-model="addFrom.attr_name"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="addDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addParams">确 定</el-button> </span> </el-dialog> <el-dialog :title=" '修改' + getTitleText" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed" > <el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="100px"> <el-form-item :label="getTitleText" prop="attr_name"> <el-input v-model="editFrom.attr_name"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="editDialogClosed = false">取 消</el-button> <el-button type="primary" @click="editParams">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { cateList: [], cateProps: { value: 'cat_id', label: 'cat_name', children: 'children' }, inputVisible: false, inputValue: '', selectedCateKeys: [], activeName: 'many', manyTableData: [], onlyTableData: [], addDialogVisible: false, editDialogVisible: false, // 修改表单数据对象 editFrom: { attr_name: '', }, // 修改表单验证规则 editFromRules: { attr_name: [ { required: true, message: '请输入参数名称', trigger: 'blur' }, ], }, addFrom: { attr_name: '', }, // 添加表单的验证规则 addFromRules: { attr_name: [ { required: true, message: '请输入参数名称', trigger: 'blur' }, ], }, } }, created() { this.getCateList() }, computed: { // 按钮需要被禁用返回true, 否则返回false isBtnDisabled() { if (this.selectedCateKeys.length !== 3) { return true } return false }, cateId() { if (this.selectedCateKeys.length === 3) { return this.selectedCateKeys[2] } return null }, getTitleText() { if (this.activeName === 'many') { return '动态参数' } return '静态属性' }, }, methods: { // 获取所有的商品分类列表 async getCateList() { const { data: res } = await this.$http.get('categories') if (res.meta.status !== 200) { return this.$message.error('获取商品数据列表失败！') } this.cateList = res.data console.log(this.cateList) }, // 级联选择框 选中变化 触发 async handleChange() { this.getParamsData() }, handleInputConfirm() { console.log(ok) }, // 删除对应的参数可选项 handleClose (i, row) { row.attr_vals.splice(i, 1) this.saveAttrVals(row) }, async getParamsData() { if (this.selectedCateKeys.length !== 3) { this.selectedCateKeys = [] this.manyTableData=[] this.onlyTableData=[] return } console.log(this.selectedCateKeys) const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes`, { params: { sel: this.activeName }, } ) if (res.meta.status !== 200) { return this.$message.error('获取参数列表失败！') } res.data.forEach((item) => { // 通过三元表达式判断attr_vals是否为空 item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] // 控制文本框的显示与隐藏 item.inputVisible = false // 文本框的输入值 item.inputValue = '' }) console.log(res.data) if (this.activeName === 'many') { this.manyTableData = res.data } else { this.onlyTableData = res.data } }, handleTabsClick() { // console.log(this.activeName) this.getParamsData() }, addDialogClosed() { this.$refs.addFromRef.resetFields() }, // 添加参数 addParams() { this.$refs.addFromRef.validate(async (valid) => { if (!valid) return const { data: res } = await this.$http.post( `categories/${this.cateId}/attributes`, { attr_name: this.addFrom.attr_name, attr_sel: this.activeName, } ) if (res.meta.status !== 201) { return this.$message.error('添加参数失败！') } this.$message.success('添加参数成功！') this.addDialogVisible = false this.getParamsData() }) }, editDialogClosed() { this.$refs.editFromRef.resetFields() }, showInput(row) { row.inputVisible = true // $nextTick方法的作用：当页面元素被重新渲染之后，才会至指定回调函数中的代码 this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus() }) }, editParams() { this.$refs.editFromRef.validate(async (valid) => { if (!valid) return const { data: res } = await this.$http.put( `categories/${this.cateId}/attributes/${this.editFrom.attr_id}`, { attr_name: this.editFrom.attr_name, attr_sel: this.activeName, } ) if (res.meta.status !== 200) { return this.$message.error('修改参数失败！') } this.$message.success('修改参数成功！') this.getParamsData() this.editDialogVisible = false }) }, async showEditDialog(attr_id) { const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes/${attr_id}`, { params: { attr_sel: this.activeName }, } ) if (res.meta.status !== 200) { return this.$message.error('获取分类失败！') } this.editFrom = res.data this.editDialogVisible = true }, // 根据Id删除对应的参数项 async removeParams(attr_id) { const confirmResult = await this.$confirm( '此操作将永久删除该参数, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ).catch((err) => err) if (confirmResult !== 'confirm') { return this.$message.info('已取消删除！') } const { data: res } = await this.$http.delete( `categories/${this.cateId}/attributes/${attr_id}` ) if (res.meta.status !== 200) { return this.$message.error('删除参数失败！') } this.$message.success('删除参数成功！') this.getParamsData() }, // 文本框失去焦点,或者按下Enter触发 handleInputConfirm (row) { // 输入的内容为空时，清空 if (row.inputValue.trim().length === 0) { row.inputValue = '' row.inputVisible = false return } row.attr_vals.push(row.inputValue.trim()) row.inputValue = '' row.inputVisible = false // 提交数据库，保存修改 this.saveAttrVals(row) },// 将对attr_vals（Tag） 的操作 保存到数据库 async saveAttrVals (row) { const { data: res } = await this.$http.put( `categories/${this.cateId}/attributes/${row.attr_id}`, { attr_name: row.attr_name, attr_sel: row.attr_sel, attr_vals: row.attr_vals.join(' ') } ) if (res.meta.status !== 200) { return this.$message.error('修改参数项失败！') } this.$message.success('修改参数项成功！') }, }, } </script> <style lang="less" scoped> .cat_opt { margin: 15px 0px; } .el-cascader { width: 25%; } .el-tag { margin: 8px; } .input-new-tag { width: 90px; } </style> <!-- 选择商品分类区域 --> <el-row class="cat_opt"> <el-col> <span>选择商品分类：</span> <!-- 商品分类的级联选择框 --> <el-cascader v-model="selectedCateKeys" :options="cateList" :props="cateProps" @change="handleChange" ></el-cascader> </el-col> </el-row> 演示案例： 自己实施结果： 目前的解决方案： <!-- 选择商品分类区域 --> <el-row class="cat_opt"> <el-col :span="3"> <span>选择商品分类：</span> </el-col> <!-- 选择商品分类的级联选择框 --> <el-col :span="6"> <el-cascader :options="catelist" :props="cateProps" v-model="selectedCateKeys" @change="cateChange" label="选择商品分类：" > </el-cascader> </el-col> </el-row>
- 10天前回答 6 已采纳 follow.user_name 可以正常获取到值，就是input框内回显有点问题，选择第一次不回显 第二次才能正常回显，两次都能获取到选中的值
- 回答 1 已采纳 由于对Jquery不太熟，想请教下各位，目前已经实现好了二级级联获取分类类型的数据，但是我想添加一个新的功能，就是在选择类型数据后，能有一个相对应的图片进行显示，数据库中有这个对于ID的图片地址的字段。但就是不知该如何实现，求思路和关键代码，谢谢各位大神。
- 6年前回答 4 已采纳 在javaweb项目开发中，在添加产品的界面中往往需要实现动态的级联效果，我用的hibernate的注解做的，有没有大神给点思路谢谢啦。
- 回答 2 已采纳 XX软件工程师笔试试题 注：1、请参考人员将答案写在答题纸上，勿将答案写在此卷上。 2、请参考人员将编号与姓名填写在答题纸上。 1、 以下数据结构中不属于线性数据结构的是（）。 A、队列 B、线性表 C、二叉树 D、栈 我的答案：C 2、 在结构化方法中，用数据流程图（DFD）作为描述工具的软件开发阶段是（）。 A、 可行性分析 B、需求分析 C、详细设计 D、程序编码 我的答案：B 3、 结构化程序设计主要强调的是（）。 A、 程序的规模 B、程序的易读性 C、程序的执行效率 D、程序的可移植性 我的答案：C 4、 在软件生命周期中，能准确地确定软件系统必须做什么和必须具备哪些功能的阶段（）。 A、 概要设计 B、详细设计 C、可行性分析 D、需求分析 我的答案：B 5、 下列关于栈的叙述中正确的是（）。 A、 在栈中只能插入数据 B、在栈中只能删除数据 B、 栈是先进先出的线性表 D、栈是先进后出的线性表 我的答案：D 6、 下面不属于软件设计原则的是（）。 A、 抽象 B、模块化 C、自底向上 D、信息隐蔽 我的答案：C 7、 对长度为N的线性表进行顺序查找，在最坏情况下所需要的比较次数为（）。 A、 N+1 B、N C、（N+1）/2 D、N/2 我的答案：C 8、 视图设计一般有3种设计次序，下列不属于视图设计的是（）。 A、 自顶向下 B、由外向内 C、由内向外 D、自底向上 我的答案：C 9、下列有关数据库的描述，正确的是（）。 A、数据库是一个DBF文件 B、数据库是一个关系 C、数据库是一个结构化的数据集合 D、数据库是一组文件 我的答案：C 10、下列说法中，不属于数据模型所描述的内容的是（）。 A、数据结构 B、数据操作 C、数据查询 D、数据约束 我的答案：A 11、若按功能划分，软件测试的方法通常分为白盒测试方法和（黑盒测试方法）。 12、数据库系统的三级模式分别为（级联）模式、内部级模式与外部级模式。 13、在最坏情况下，冒泡排序的时间复杂度为（N+1/2）。 14、在面向对象方法中，信息隐蔽是通过对象的（封装）性来实现的。 15、关系模型的数据操纵既是建立在关系上的数据操纵，一般有（插入）、增加、删除、和修改四种操作。 16、TIME（）的返回值的数据类型是（String）类型。 17、编写SQL语句 1）、创建一张学生表，包含以下信息，学号，姓名，年龄，性别，家庭住址，联系电话 我的答案： create table student( studentCardNo number(2) primary key, name char(10), age number(2), sex char(2) check(sex in (‘男’,’女’)), address varchar2(100), tel number(2) ) 2)、修改学生表的结构，添加一列信息，学历 我的答案： alter table student add(xueli varchar2(20)); 3)、修改学生表的结构，删除一列信息，家庭住址 我的答案： alter table student drop column address; 4)、向学生表添加如下信息： 学号 姓名 年龄 性别 联系电话 学历 1 A 22 男 123456 小学 2 B 21 男 119 中学 3 C 23 男 110 高中 4 D 18 女 114 大学 我的答案： insert into student values(‘&1’,’&2’,’&3’); 一次一次添加 5)修改学生表的数据，将电话号码以11开头的学员的学历改为“大专” 我的答案： update student set xueli=”大专” where tel like 11%; 6)删除学生表的数据，姓名以C开头，性别为‘男’的记录删除 我的答案： delete student where name like C% or sex=”男”; 7)查询学生表的数据，将所有年龄小于22岁的，学历为“大专”的，学生的姓名和学号显示出来 我的答案： select name,studentCardNo from student where age<22 and xueli=”大专”; 8)查询学生表的数据，查询所有信息，列出前25%的记录 我的答案： select top*0.25 from student; 9）查询出所有学生的姓名，性别，年龄降序排列 我的答案： select name,sex,age from student where age desc; 10）按照性别分组查询所有的平均年龄 我的答案： select avg(age) from student group by sex; 18、什么是存储过程？为什么存储过程要比单纯的SQL语句执行起来要快？ 我的答案： 存储过程算是一种优化查询需要比单存SQL语句执行的要快 19、两张关联表，删除主表中已经在副表中没有的信息 我的答案 delete from fubiao a where a.fid not in(select id from zhubiao) 20、程序题： 用1、2、2、3、4、5这六个数字，用java或你熟悉的语言，打印出所有不同的排列，如：512234、412345等，要求：“4”不能再第三位，“3”与“5”不能相连。并将这些数据按从小到大输出。 我的答案 我的写的不好 没贴下 笔试的时候没写全 21、String 和 StringBuffer的区别 我的答案 String定长 StringBuffer 变长 22、&和&&的区别 我的答案 &短路与 &&逻辑与 网上答案： & 是位运算符，表示按位与运算， && 是逻辑运算符，表示逻辑与（and）。 23、final，finally，finalize的区别 我的答案 Final静变量关键字，finally异常关键字，finalize 网上答案 final 用于声明属性，方法和类，分别表示属性不可变，方法不可覆盖，类不可继承。 finally是异常处理语句结构的一部分，表示总是执行。 finalize是Object类的一个方法，在垃圾收集器执行的时候会调用被回收对象的此方法， 可以覆盖此方法提供垃圾收集时的其他资源回收，例如关闭文件等。 24、数组有没有length（）这个方法？String有没有length（）这个方法？ 我的答案： 数组没有length()这个方法，有length的属性。 String有length()这个方法。 25、是否可以继承String类？ 我的答案： 不可以 解释的很乱 26、说出数据连接池的工作机制是什么？ 我的答案： 反正解释的很乱我感觉 27、垃圾回收的优点和原理。并考虑2种回收机制。 我的答案： 动态回收 解释的很乱 网上答案： Java语言中一个显著的特点就是引入了垃圾回收机制，使c++程序员最头疼的内存管理的问题迎刃而解， 它使得Java程序员在编写程序的时候不再需要考虑内存管理。由于有个垃圾回收机制，Java中的对象不再有"作用域"的概念， 只有对象的引用才有"作用域"。垃圾回收可以有效的防止内存泄露，有效的使用可以使用的内存。 垃圾回收器通常是作为一个单独的低级别的线程运行，不可预知的情况下对内存堆中已经死亡的或者长时间没有 使用的对象进行清除和回收，程序员不能实时的调用垃圾回收器对某个对象或所有对象进行垃圾回收。 回收机制有分代复制垃圾回收和标记垃圾回收，增量垃圾回收。 28、你所知道的集合类都有哪些？区别？主要方法？ 我的答案： Arraylist 非线性的、Vertor线性的 29、JSP的内置对象及方法。 我的答案： Page,exception,out,page content,application,request,reponse,session,config 30、页面间对象传递的方法。 我的答案： 那几个方法都写错了 31、你知道Request对象的主要方法有哪些？ 32、J2EE是技术还是平台还是框架？ 我的答案： J2EE是技术也是平台 网上答案： J2EE本身是一个标准，一个为企业分布式应用的开发提供的标准平台。 J2EE也是一个框架，包括JDBC、JNDI、RMI、JMS、EJB、JTA等技术。 33、我们在web应用开发过程中经常遇到输出某种编码的字符，如iso8859-1等，如何输出一个某种（例如GBK编码类型）编码的字符串？ Request encording(“GBK”) 34、j2ee常用的设计模式？说明工厂模式。 Gof23种设计模式 工厂模式：Factory 网上答案： Java中的23种设计模式： Factory（工厂模式）， Builder（建造模式）， Factory Method（工厂方法模式）， Prototype（原始模型模式），Singleton（单例模式）， Facade（门面模式）， Adapter（适配器模式）， Bridge（桥梁模式）， Composite（合成模式）， Decorator（装饰模式）， Flyweight（享元模式）， Proxy（代理模式）， Command（命令模式）， Interpreter（解释器模式）， Visitor（访问者模式）， Iterator（迭代子模式）， Mediator（调停者模式）， Memento（备忘录模式）， Observer（观察者模式）， State（状态模式）， Strategy（策略模式）， Template Method（模板方法模式）， Chain Of Responsibleity（责任链模式） 工厂模式：工厂模式是一种经常被使用到的模式，根据工厂模式实现的类可以根据提供的数据生成一组类中某一个类的实例， 通常这一组类有一个公共的抽象父类并且实现了相同的方法，但是这些方法针对不同的数据进行了不同的操作。 首先需要定义一个基类，该类的子类通过不同的方法实现了基类中的方法。 然后需要定义一个工厂类，工厂类可以根据条件生成不同的子类实例。 当得到子类的实例后，开发人员可以调用基类中的方法而不必考虑到底返回的是哪一个子类的实例。 35、JSP四种会话跟踪技术 我的答案： Application cookie session 36、排序都有哪几种方法？请举例 冒泡 选择 快序 二分查找 网上答案： 排序的方法有：插入排序（直接插入排序、希尔排序）， 交换排序（冒泡排序、快速排序）， 选择排序（直接选择排序、堆排序）， 归并排序，分配排序（箱排序、基数排序） 快速排序的伪代码。 //使用快速排序方法对a[ 0 :n- 1 ]排序 从a[ 0 :n- 1 ]中选择一个元素作为m i d d l e，该元素为支点 把余下的元素分割为两段left 和r i g h t，使得l e f t中的元素都小于等于支点，而right 中的元素都大于等于支点 递归地使用快速排序方法对left 进行排序 递归地使用快速排序方法对right 进行排序 所得结果为l e f t + m i d d l e + r i g h t 37、关于模块间的设计原则？ 规范要一样 38、项目过程一般是怎样的？你参加过几个项目开发？参加过的项目流程是怎样的？自己负责与人合作工作内容及自我评价？ 从需求调研——设计开发——实施 参加过网站的实施 模板的制作 39、tomcat自动关闭常见原因？ 我的答案： 现在没遇到过 40、如何设置TOMCAT内存和连接数？ 我的答案： Tomcat群集 41、你如何理解Tomcat是什么？ 我的答案： Tomcat是JSP Servlet 容器恰当的说 42、静态变量和实例变量的区别？ 我的答案： 静态变量域用final修饰，每次都被调用 实例变量则不会 43、IE、FF下面CSS的解释区别 我的答案： 自己编的 44、web前端技术你了解哪些技术？ 我的答案： JAVAScript,CSS,DIV,Ajax,Ajax框架，DWR,dojo,jguery 45、什么是报表？什么是报表控件，作用是什么？你了解哪些报表工具？ 我的答案： 解释的很乱 46、你了解的那些统计图表类型？ 我的答案： 自己编的 47、Flex与数据库连接的三种方式？ 我的答案： 自己编的 ------------------------------------------------------- 我答错的、 错在哪里？ 没答上的帮忙解答下？ 感激了 ！
- 回答 1 已采纳 I have a demo.html page, which contains two selections, the first one is "Type", and the second one is "Config", when I choose a certain type in the first selection, I want to use ajax to update the values in the second selection. For example, Type may have values: VM, Server, DCA and VM only has config "singe node", but DCA has Config "d0"-"d48". so if I select DCA in the first selection, I should have 49 options in the second one. I searched online and did find some solutions, then I wrote some code by myself. The problem now is that whatever I select in the first selection, the second one will not be updated, it always return null. Not sure where the prob is, the code looks fine :( Thanks for any help. demo page <html> <head> <meta charset="utf-8"> <title>Reservation System</title> <link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"> <link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css"> <link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css"> <link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css"> <link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/mrbs.css.php" type="text/css"> <link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css"> <meta name="robots" content="noindex"> <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script> <script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script> <script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script> <script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script> <script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script> <script type="text/javascript"> var xmlhttp; var url; function createXMLHttpRequest() { if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } function showConfig(str) { url = "getOptions.php?type="+str; createXMLHttpRequest(); xmlhttp.open("GET",url,true); xmlhttp.send(null); xmlhttp.onreadystatechange = function() {handleStateChange()}; } function handleStateChange() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var str = xmlhttp.responseText; alert (url); createConfig(str); } } function createConfig(str) { var configs = str; var config = configs.split(","); while (document.getElementById("config").options.lengt>0) document.getElementById("config").options.remove(0); for (var i=0; i<config.length; i++) { var ooption = document.createElement("option"); ooption.value = config[i]; ooption.text = config[i]; document.getElementById("config").add(ooption); } } </script> <form id="add_room" class="form_admin" action="add.php" method="post"> <fieldset> <legend>Add DCA</legend> <input type="hidden" name="type" value="room"> <input type="hidden" name="area" value="2"> <div> <label for="room_name">Name:</label> <input type="text" id="room_name" name="name" maxlength="50"> </div> <div> <label for="room_description">Description:</label> <input type="text" id="room_description" name="description" maxlength="100"> </div> <div> <label for="room_type">Type:</label> <select class="room_area_select" id="type_select" name="area" onchange="showConfig(this.value)"><option value="VM">VM</option><option value="Server">Server</option><option value="DCA-V1">DCA-V1</option><option value="DCA-V2">DCA-V2</option></select> </div> <div> <label for = "config">config:</label> <select id="config" ></select> </div> </fieldset> </form> getOptions.php file <?php $type = $_GET['type']; echo $type; $result = ""; if ($type == "DCA-V1") { for ($i=0;$i<47;$++) $result .= $i.","; $result .= "48"; } else if ($type == "Server") $result .= "single node"; else if ($type == "VM") { $result .= "single host"; } echo $result; ?>
- 回答 1 已采纳 Purpose: To find the easiest and more flexible way creating cascading dropdown lists, using tools jquery(javascript), php, mysql; If you have other easier/flexible options then please, share it.
- 回答 1 已采纳 我试过给他们同一个v-model，这个是可以实现联动效果，但是当联动的数据回显之后，联动就失效了，所以来请教各位有没有其他办法呢。。
- 相守之路的博客 elementUI的 cascader 级联选择控件的默认值(回显)问题 场景一：后端返回的是字符串，但是其格式是数组类型 后端返回结果如：’[1,2,4,5]’ 修改方法： 法一：（比较麻烦，但是几乎是万能的，所有的都可以转换成数组...
- 椰卤工程师的博客 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南...
- 昨夜太平长安888的博客 我们先看Cascader 级联选择器 官方文档提供的数据格式： options: [ { value: "zhinan", label: "指南", children: [ { value: "shejiyuanze", label: "设计原则", children: [ {.
- @必意玲的博客 1. 温馨提示：Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版 2. 直接步入主题，先看下需求要实现的功能 就是一个级联联动效果，但是他是每一级都能够选择，可以看到既可以选商品组，还能选择商品组下面...
- 落日长烟的博客 vue+element 如何在Cascader级联选择器 懒加载lazyload中 实现 服务端请求数据
- 管老师的斐波那契的博客 //请求地区的接口 selectAddrByLevel({ addrLevel: level + 1, addrParentCode: node.value }).then(res => { const nodes = res.data.map(item => ({ value: item.addrCode, label: item.addrName, leaf: level >=...
- 9月前一片舟的博客 el-cascader <el-cascader class="filter-item" placeholder="请选择所属部门" :options="departmentData" v-model="departmentid" clearable :props="props" style="width: 200px;" cha
- Y_余悸的博客 1. 通过后端返回数据绑定其级联数据源的值（父、子级同时展示 ） html代码块 <el-cascader v-model="consult.catalog" :options="options" :props="props" collapse-tags clearable></el-cascader>...
- 能力限制想象力的博客 做公司项目的时候需要用到级联选择器，获取数据后发现无法主动清空内容，主要尝试了网上几种方法，如主动触发clearable、还有什么鬼暴力清空方法和以下方法，均以失败告终。 let obj = {} obj.stopPropagation = () ...
- 在路上`的博客 当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误（如果没有选择就不会报错的） 分析 这个错误的原因是当选择后，再更新内容时，选择器仍会关联原来的数据，导致找不到之前选择...